Vue提高06 元件間通訊

父元件向子元件傳遞資料，直接使用prop即可，父元件中在子元件的例項上通過v-bind傳入prop:

在子元件中宣告了這個prop之後就可以使用：

子元件向父元件可以直接通過$emit元件上的事件來進行通訊，例如在父元件中，通過v-on為子元件傳入乙個事件：

子元件中通過#emit來觸發傳入的自定義事件，以引數的形式將資料傳遞給父元件：

非父子元件的通訊有幾種解決方案，如果是比較複雜的應用，可以直接使用vuex來實現通訊和資料管理，如果不使用vuex則可以使用下面幾種方法來實現元件通訊。

原理就是通過乙個空的vue例項eventbus，a元件首先在eventbus上通過$on訂閱乙個事件，然後在元件b中通過$emit發布乙個事件，在事件中將資料進行傳遞。

首先在乙個單獨的檔案中定義名稱為eventbus的vue例項，並匯出這個例項

// eventbus.js
import vue from 'vue';
export default new vue()

在元件a引入eventbus後，在eventbus上訂閱乙個事件getvalue，最好在元件銷毀前登出監聽的事件：

// 元件a
import eventbus from './eventbus';
export default )
},beforedestroy() ,
}

然後在元件b中也引入eventbus後，藉由eventbus發布getvalue事件，並將資料作為第二個引數傳遞給事件的訂閱者：

// 元件b
import eventbus from './eventbus';
export default 
},}

上面這種方式，在每個需要通訊的元件都需要手動引入eventbus，很麻煩。所以希望能夠做到一次注入，到處使用。

改進的方法就是在main.js中定義vue根例項時，將eventbus新增到根例項的data中，然後再每個元件中都可以通過this.#root.eventbus來訪問它：

// main.js
new vue(,
});

在元件a使用$root.eventbus.$on來訂閱事件：

// 元件a
export default )
},beforedestroy() ,
}

在元件b中使用$root.eventbus.$on來發布事件：

// 元件b
import eventbus from './eventbus';
export default 
},}

vue物件本質上就是乙個js物件，想要引入eventbus只需要在vue的原型prototype上增加乙個屬性就可以了。本質上所有的vue元件都是繼承全域性的vue，所以只要在初始化vue物件之前在prototype上定義屬性，這樣所有的元件都可以訪問這個屬性了。

所以在main.js中，在例項化vue之前增加**

// main.js
// 在例項化vue例項之前
vue.prototype.$eventbus = vue.prototype.$eventbus || new vue();

元件a中

// 元件a
this.$eventbus.$on('getvalue', value => {})

元件b中

// 元件b
this.$eventbus.$emit('getvalue', 'message')

vue的2.6版本新增了乙個vue.observale，它可以定義乙個可響應的物件，實際上vue內部會用它來處理data函式返回的物件。

這個api返回的物件可以直接用於渲染函式和計算屬性內，並且在發生改變時觸發相應的更新，可以作為最小化的跨元件狀態儲存器，用於簡單的場景。

我們新建乙個******store.js，匯出乙個使用vue.observale處理後的物件：

// ******store.js
import vue from 'vue';
export default vue.observable()

然後再main.js中作為vue的根例項的data的屬性匯入（也可以根據元件通訊的範圍，分別在不同的元件匯入，比如作為元件的資料處理層時）：

// main.js
import ******store from './******store'
new vue(,
});

這樣在需要通訊的元件中就可以直接修改這個變數，在另外乙個元件中通過計算屬性引入這個變數，就可以實現響應式的更新：

元件a中直接修改這個變數：

// 元件a
export default 
},}

元件b中通過計算屬性引入這個變數：

// 元件b
export default 
}}

實際上在******store.js中我們可以繼續定義commit、action、mutation、dispatch等事件，來統一管理變數的修改，實際上就是自己實現了乙個簡易的vuex

在使用vue.observable時，有兩點需要注意：

（1）vue.observable返回的物件只能用於渲染函式或者計算屬性內，才能實現響應式的更新，不能直接用於data函式中賦值

const state = vue.observable()
const demo = }
}, `count is: $`)
}}

（2）在vue 2.x中，被傳入的物件會直接被vue.observable改變，它和被返回的物件是同乙個物件。但是在vue 3.x中，則會返回乙個可響應的**，而對源物件直接進行修改仍是不可相應的。因此為了相容性，應該始終操作vue.observable返回的物件，而不是傳入的源物件。

Vue提高06 元件間通訊

Vue 二元件間通訊

VUE 元件（二）元件通訊

Vue2 元件間通訊全方案

Vue提高06 元件間通訊

Vue 二 元件間通訊

VUE 元件（二）元件通訊

Vue2 元件間通訊全方案

相關推薦

Vue 二元件間通訊