父子組件傳值問題

Vue是個以組件化開發著稱的框架:于是組件間傳值就經常被用到:

1、父傳子:prop,slot

prop只是一個傳值,子組件在script的prop中聲明后可以直接進行使用

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

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

注意: slot傳值在父組件傳值之后,在子組件進行使用需要用slot-scope屬性進行聲明

2、子傳父:emit

父組件需要寫一個方法用來接收子組件傳遞出來的數據,而子組件則可以通過$emit('方法米',數據)的方式進行父組件方法的觸發和傳值

注意:現在新增了一個傳值的后綴.sync,通過這個后綴對于簡單的狀態修改,父組件可以不寫方法,直接更新;

<parent :title.sync="title" ></parent>

<children @click="$emit('update:title',新數據)"></children>

如上所示:子組件只要通過updata: 拼接屬性名,然后跟著新數據就可以成功更新狀態

注意:新的后綴.sync不能與v-bind一起使用,也不能拼接表達式;但是你可以傳一個數組進入

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容