March 16, 2020

vue Event Bus 教學:組件間溝通橋樑

props、vuex 以外的跨組件傳遞方式


文 / 西打藍 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,可能是沒機會用到的關係,不過這次練習下來,發現真的是挺方便的。




閱讀量




聯絡與合作


有文章撰寫、網站設計(UI/UX)、平面設計、網站工程需求,皆可以來信詢問,在關於下方有參考作品。

或是想分享心情、聊聊天、交朋友,可以來秘密通道讓我知道唷。

Email: aaa24295234@gmail.com