本篇文章主要介紹了Vue組件通訊之Bus的具體使用,現在分享給大家,也給大家做個參考。
關於組件通訊我相信小夥伴們肯定也都很熟悉,就不多說了,對組件通訊還不熟悉的小伙伴移步這裡。
在vue2.0中 $dispatch 和 $broadcast 已經被棄用。在官方文件中給出的解釋是:
因為基於元件樹結構的事件流方式實在是讓人難以理解,並且在元件結構擴展的過程中會變得越來越脆弱。這種事件方式確實不太好,我們也不希望在以後讓開發者太痛苦。且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通訊問題。
官方推薦的狀態管理方案是 Vuex。不過如果專案不是很大,狀態管理也沒有很複雜的話,使用 Vuex 有種殺雞用牛刀的感覺,當然,這也是要根據自己的需求來的,只是建議。
vue官方文檔中有這樣一個定義:非父子組件的通信,內容很少,如下:
#其實關於這個非父子組件通信的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); },
上面是我整理給大家的,希望未來會對大家有幫助。
相關文章:
以上是在Vue組件通訊中如何使用Bus的詳細內容。更多資訊請關注PHP中文網其他相關文章!