Vue-EventBus呼叫兄弟組件

發表於 | 分類於 ， ，


我們可以透過props、emit來溝通父子元件，而event bus則是溝通同層組件，但由於太常使用會造成元件複雜化、維護困難，所以當專案龐大時還是請使用Vuex哦!!
那我們來看看怎麼用event bus吧~

創建橋梁

創建一個bus.js來當作橋梁，當要使用時再呼叫。

1
2
import Vue from 'vue'
export default new Vue()

這樣我們就創造出了一個新的vue的實例。在我們需要使用的地方做引入。

1
import bus from './bus.js'

使用

在我們要發送資訊或要呼叫事件的地方，做一個中樞廣播動作。

1
2
3
4
5
6
7
8
9
export default {
    methods: {
        doSomething: function() {
            bus.$emit('Event', {
                msg: 'Test.'
            });
        }
    }
}

在任何想要接收訊息的地方去做接收的動作。

1
2
3
4
5
6
7
8
9
10
11
created(){
    bus.$on('Event',data=>{
      this.myname=data;
    })
  },
beforeDestroy: function() {
        // [銷毀監聽事件]
        // 最好在组件銷毀前，清除 Event 所有監聽 
        // 如果要指定哪個監聽對應方法，就需要傳入第二個參數(對應$on設定的方法)
        bus.$off('Event');
    }

這樣就能在任何的元件中可以拿到想要的數據，但如果是父子元件則不建議使用。