Vue 出一個女友吧!-組件溝通 event bus

發表於 | 更新於 | 分類於

前言

接下來將會講一個東西叫做組件溝通 event bus，可是我個人比較習慣講成元件溝通就是了…那麼 event bus 會拿來做什麼呢?來記錄一下吧

event bus

通常 event bus 通常會很常見於訊息回饋，在元件觀念都是一層一層向下包覆，但是最底層的訊息若要直接向外層傳就要使用 event bus

event bus

那個 event bus 就是建立在 Vue pototype 底下，那該怎麼做呢?

首先先在 src 資料夾下建立一個 bus.js 的檔案，然後內容是以下

1
2
import Vue from 'vue';
Vue.prototype.$bus = new Vue();

接下來打開 main.js 將 bus.js 注入

1
import './bus';

這樣就完成了 event bus 的動作哩

使用方式

首先先建立一個 AlertMessate.vue 然後內容依照六角學院所提供的 API 文件課程部分模板就可以了

AlertMessate

這邊的重點在下方生命週期 created 處

created

最主要的重點程式碼是這一段

1
2
3
vm.$bus.$on('message:push', (message, status = 'warning') => {
  vm.updateMessage(message, status);
});

首先這邊我們是針對我們一開始掛載的 $bus 去做註冊 ($on) 事件，並且事件叫做 message:push 的方法，那麼外層是使用 $on 去註冊，那麼內層要使用的話就是使用 $emit 去觸發

接下來回到 Products.vue，然後在下方 deleteProducts() 方法處找到 AJAX 成功刪除資料時加入一段程式碼

1
vm.$bus.$emit('message:push',response.data.message);

vm.$bus.$emit

最後一個步驟要記得在外層加入 AlertMessage，那就是掛在 Dashboard

Dashboard

接下來就可以試著刪除產品看看囉~

event bus

那如果希望可以依照訊息需求去跳出樣式，就可以這樣子寫

1
vm.$bus.$emit('message:push',response.data.message, 'success');

樣式

樣式主要是使用的 bootstrap 的樣式，所以失敗時也可以出現 AlertMessage 唷~

後面就留給自己去完成囉

0%