快捷導(dǎo)航

Vue組件通信之Bus的具體使用

更新時(shí)間：2017年12月28日 10:56:07 作者：Damer

本篇文章主要介紹了Vue組件通信之Bus的具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

關(guān)于組件通信我相信小伙伴們肯定也都很熟悉，就不多說了，對組件通信還不熟悉的小伙伴移步這里。

在vue2.0中 $dispatch 和 $broadcast 已經(jīng)被棄用。官方文檔中給出的解釋是：

因?yàn)榛诮M件樹結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解，并且在組件結(jié)構(gòu)擴(kuò)展的過程中會變得越來越脆弱。這種事件方式確實(shí)不太好，我們也不希望在以后讓開發(fā)者們太痛苦。并且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通信問題。

官方推薦的狀態(tài)管理方案是 Vuex。不過如果項(xiàng)目不是很大，狀態(tài)管理也沒有很復(fù)雜的話，使用 Vuex 有種殺雞用牛刀的感覺，當(dāng)然，這也是要根據(jù)自己的需求來的，只是建議。

vue官方文檔中有這樣一個(gè)定義：非父子組件的通信，內(nèi)容很少，如下：

其實(shí)關(guān)于這個(gè)非父子組件通信的demo還是有的，它藏在了$dispatch 和 $broadcast的遷移文檔中，有興趣的小伙伴可以點(diǎn)擊進(jìn)去查看。文檔中的建議就是：

對于$dispatch 和 $broadcast最簡單的升級方式就是：通過使用事件中心，允許組件自由交流，無論組件處于組件樹的哪一層。由于 Vue 實(shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口，你可以通過實(shí)例化一個(gè)空的 Vue 實(shí)例來實(shí)現(xiàn)這個(gè)目的。
這個(gè)集中式的事件中間件就是 Bus。我習(xí)慣將bus定義到全局：

app.js

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

然后在組件中，可以使用$emit， $on， $off 分別來分發(fā)、監(jiān)聽、取消監(jiān)聽事件：

分發(fā)事件的組件

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是傳遞的參數(shù)
 //...
 }
}

監(jiān)聽的組件

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //獲取傳遞的參數(shù)并進(jìn)行操作
  //todo something
 })
},
// 最好在組件銷毀前
// 清除事件監(jiān)聽
beforeDestroy () {
 this.$bus.$off('todoSth');
},

如果需要監(jiān)聽多個(gè)組件，只需要更改 bus 的 eventName:

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件監(jiān)聽
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: