面試 父子元件傳值問題

2021-10-11 20:59:02 字數 533 閱讀 7392

vue是個以元件化開發著稱的框架:於是元件間傳值就經常被用到:

prop只是乙個傳值,子元件在script的prop中宣告後可以直接進行使用

注意:prop傳遞值不能在子元件進行修改,不然瀏覽器會報錯,需要通過賦值給子元件自身申明的元素才能進行修改

slot(插槽):與prop不同,插槽支援html語句插入以及元件插入,只要在子元件同樣寫上slot就能成功展示

注意: slot傳值在父元件傳值之後,在子元件進行使用需要用slot-scope屬性進行宣告

父元件需要寫乙個方法用來接收子元件傳遞出來的資料,而子元件則可以通過$emit(『方法名』,資料)的方式進行父元件方法的觸發和傳值

注意:現在新增了乙個傳值的字尾.sync,通過這個字尾對於簡單的狀態修改,父元件可以不寫方法,直接更新;

如上所示:子元件只要通過updata: 拼接屬性名,然後跟著新資料就可以成功更新狀態

注意:新的字尾.sync不能與v-bind一起使用,也不能拼接表示式;但是你可以傳乙個陣列進入

VUE父子元件傳值問題

元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。1.靜態props父元件 子元件 輸出 hello 2.動態props 要動態地繫結父元件的資料到子模板的props用 v bind。每當父元件的資...

父子元件傳值

因為啊,今天在寫 的時候遇到坑,自己發現元件傳值有點不熟悉了,以前寫過,但是都是照著文件寫的。然後今天按照記憶寫,發現自己有點忘了。究其緣由,我覺的還是自己對於父子元件傳值的理解不夠深入。首先vue2.0規定了元件傳值是單向的,父元件傳值給子元件,方法是利用繫結屬性的方式,子元件通過props接受,...

父子元件傳值

父元件的data中定義值 用import引入子元件 在components中注入子元件 父元件對子元件呼叫 註冊 引用 import list from components common list.vue export default 註冊 hello 元件 components 在父元件中定義乙...