Vue中傳值主要分為兩部分
父子通信
1.父傳子
傳遞:當子組件在父組件中當做標簽使用的時候,通過給子組件綁定一個自定義屬性,值為需要傳遞的數據
接收:在子組件內部通過props進行接收
接收的方式有2種 一種是數組接收 另一種是對象接收
一般情況下我們都使用對象進行接收,因為對象接收可以校驗數據的類型
例子
props:["val"];
props:{
val:String
}
2.
子傳父
傳遞:當子組件給父組件傳遞數據的時候,通過調用父組件給子組件綁定的自定義事件,然后將值傳遞過去
接收:父組件通過自定義事件的函數來接收子組件傳遞過來的數據(注意這個自定義方法的函數在綁定的時候不需要加())
(2)、作用域插槽
帶參數的插槽
反向傳值
將子組件的數據傳遞給父組件,只需要給組件內部的slot綁定一個自定義屬性
在父組件中,子組件標簽的內部書寫一個template標簽,通過scpoe來接收子組件傳遞過來的數據
非父子
1、在vue的原型身上添加一個公共的vue實例,組件之間調用這個公共的實例的$on/$emit來傳遞數據 傳遞的一方調用
$emit 接收值的一方調用$on;
2、手動封裝$on $emit $off--->原理應用了觀察者模式
3、EventBus
4、vuex