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.jsbus.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 唷~

後面就留給自己去完成囉

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ