1. 程式人生 > 實用技巧 >vue元件間的通訊

vue元件間的通訊

1.通過props傳遞 --- 父傳子

2.通過$emit觸發自定義事件 --- 子傳父

3.使用ref可以在父元件中獲取以及改變子元件data,呼叫子元件事件 --- 父得子

4.子元件中使用$parent獲取改變父元件的data資料,動用父元件方法 --- 子得父

5.通過EventBus構建一箇中央時間匯流排,一個兄弟元件通過$emit觸發事件,在另一個兄弟元件中通過$on監聽自定義事件 --- 兄弟元件間通訊

6.使用$root,通過共同祖輩$root搭建通訊僑聯 --- 兄弟元件間通訊

7.使用provide 與 inject,在祖先元件定義provide屬性,返回傳遞的值;在後代元件通過inject

接收元件傳遞過來的值 --- 子孫元件與祖先元件通訊

// 祖先元件
provide(){  
    return {  
        foo:'foo'  
    }  
} 
// 祖先元件中動態修改provide引數
this._provided.foo = 'zql'



//  子孫元件
inject:['foo'] // 獲取到祖先元件傳遞過來的值  

8.vuex狀態機管理