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一起使用,也不能拼接表達式;但是你可以傳一個數組進入