文 / 西打藍 Siddharam
前言
一般 vue 在進行父子組件溝通時，通常是使用 props、emit。
如果是多個組件都需要溝通、取值的話，就會使用 vuex。
而當只有兩個組件，或是少部分組件需要溝通，但其關係又不是父子的話，則可以使用 Event Bus，以下是使用範例：
Event Bus
首先，我們先在 vue 原型上掛載 Event Bus：
// util/bus.js
import Vue from 'vue'
Vue.prototype.$bus = new Vue()
接著，我們在 main.js 中注入後，就能使用 Event Bus 囉：
// main.js
...
...
import '@/utils/bus'
...
...
完成後，我們先建立兩個 component，分別是 com1.vue、com2.vue，我們先在 com1 中註冊方法：
// component/com1.vue
...
...
created () {
this.$bus.$on('alert:msg', (text) => {
alert(text)
})
},
...
...
接著，我們在 com2 中調用 com1 所註冊的方法：
// component/com2.vue
...
...
<button @click="busEvent">TESTTEST</button>
...
...
methods: {
busEvent () {
this.$bus.$emit('alert:msg', '測試')
}
},
...
...
當我們點擊 button 時，應該就會 alert 文字，完成組件間的溝通了。
以前在開發專案時，從沒用過 Event Bus，可能是沒機會用到的關係，不過這次練習下來，發現真的是挺方便的。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com