這次帶給大家Vue組件通訊Bus使用方法，Vue組件通訊Bus使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
在vue2.0中 $dispatch 和 $broadcast 已經被棄用。在官方文檔中給出的解釋是：
因為基於元件樹結構的事件流方式實在是讓人難以理解，並且在元件結構擴展的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以後讓開發者太痛苦。且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通訊問題。
官方推薦的狀態管理方案是 Vuex。不過如果專案不是很大，狀態管理也沒有很複雜的話，使用 Vuex 有種殺雞用牛刀的感覺，當然，這也是要根據自己的需求來的，只是建議。
其實關於這個非父子元件通訊的demo還是有的，它藏在了$dispatch 和 $broadcast的遷移文檔中，有興趣的小伙伴可以點擊進去查看。文檔中的建議是：
對於$dispatch 和 $broadcast最簡單的升級方式就是：透過使用事件中心，允許元件自由交流，無論元件處於元件樹的哪一層。由於 Vue 實例實作了一個事件分發介面，你可以透過實例化一個空的 Vue 實例來實現這個目的。
這個集中式的事件中介軟體就是 Bus。我習慣將bus定義到全局：
app.js
var eventBus = {
install(Vue,options) {
Vue.prototype.$bus = vue
}
};
Vue.use(eventBus);然後在元件中，可以使用$emit， $on， $off 分別來分發、監聽、取消監聽事件：
分發事件的元件
// ...
methods: {
todo: function () {
this.$bus.$emit('todoSth', params); //params是传递的参数
//...
}
}監聽的元件
// ...
created() {
this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
//todo something
})
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
this.$bus.$off('todoSth');
},如果需要監聽多個元件，只需要更改 bus 的 eventName:
// ...
created() {
this.$bus.$on('firstTodo', this.firstTodo);
this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
this.$bus.$off('firstTodo', this.firstTodo);
this.$bus.$off('secondTodo', this.secondTodo);
},相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
##以上是Vue元件通訊Bus使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
