製作"上傳檔案之格式錯誤"的回饋訊息
整體步驟:
- 製作 Alert 元件
- 將 Alert 元件匯出至 Navbar,並在 Dashboard.vue 中
import
使用 - 如果用戶上傳檔案失敗,可透過 Event Bus 使用 Alert 元件,提醒用戶錯誤在哪裡
Part 1:Event Bus 組件溝通
使用 Event Bus 時,我們可以新增一個 bus.js 檔案來呼叫 Event Bus,再將它 import
到 main.js 中。
main.js
import './bus';
bus.js
我們將 Event Bus 掛載在 Vue 的原型下,所以可以直接對 Event Bus 做呼叫。
例如:Vue.prototype.$bus
。
import Vue from 'vue';
Vue.prototype.$bus = new Vue();
由於 Event Bus 可以做到跨元件溝通,所以建議將 Event Bus 可以使用的方法(包含使用的方法、傳遞的參數等等),都寫個註解在這個 bus.js 檔案內。
如果沒有標示,可能會忘記或不清楚有哪些方法可以使用喔。
Part 2:事件觸發流程
將 Event Bus 掛載好之後,就可以開始使用 $bus
囉!
-
在 Products.vue 中,如果上傳失敗就用
$emit
觸發messsage:push
事件,並帶入參數response.data.message
(Alert 的顯示訊息)以及danger
(Alert 的 Bootstrap 樣式)這兩個參數。this.$bus.$emit('message:push', response.data.message, 'danger');
-
當我們觸發 Alert 元件 (AlertMessage.vue) 裡的
messsage:push
事件後,就會接續地觸發該事件內的updateMessage(message, status)
事件,來跳出錯誤回饋的 Alert 訊息。vm.$bus.$on('message:push', (message, status = 'warning') => { vm.updateMessage(message, status); });
回饋訊息的整體運作流程如下圖所示:
補充說明:參數
messages
:一個陣列裡面包著物件格式資料,有message
、status
、timestamp
等屬性與值messsage:push
:是自定義事件,可自行命名message
:傳入的參數(文字內容)status
:傳入的參數(樣式,預設值為warning
)
補充說明:$on
在元件中,我們直接呼叫了 Vue 實體下的 $bus
,並用 $on
的方式註冊 message:push
方法。
後面則帶有這個方法的兩個參數,分別是參數 message
與表示狀態的值 status
(status
可以給一個預設樣式值為 warning
)。
vm.$bus.$on('message:push', (message, status = 'warning') => {
vm.updateMessage(message, status);
});
其實 $on
就類似原生 JavaScript 的監聽事件 addEventListener
。
vm.$on
是用來監聽當前實例上的自定義事件,而且事件可由 vm.$emit
觸發。
外層是用 $on
去註冊,內層則是用 $emit
去觸發它。
有
$
符號的屬性為「實例屬性」,這是官方為了區別與使用者定義的屬性所以用$
區分開來
參考資料
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫