vue組件中最常見的數據傳遞就是父子組件之間的傳遞，父組件可以通過 props 向下傳數據給子組件，子組件可以通過 $emit 事件攜帶數據給父組件。然而當兩個頁面沒有任關係，該如何通信？這就引出了 EventBus ( 事件匯流排 ) 這個概念 初始化 方法一：新建文件 首先需要初始化一個 Even ...
vue組件中最常見的數據傳遞就是父子組件之間的傳遞，父組件可以通過 props 向下傳數據給子組件，子組件可以通過 $emit 事件攜帶數據給父組件。然而當兩個頁面沒有任關係，該如何通信？這就引出了 EventBus ( 事件匯流排 ) 這個概念
初始化
方法一：新建文件
首先需要初始化一個 EventBus，並且向外共用一個 Vue 的實例對象
新建一個 js 文件，比如：EventBus.js
// src/utils/EventBus.js 文件
import Vue from 'vue'
// 向外共用 Vue 的實例對象
export default new Vue()
方法二：掛載在 Vue 的原型上
在 main.js 中初始化 EventBus
// src/main.js
Vue.prototype.$EventBus = new Vue()
傳遞數據
// a.vue
// 導入 EventBus
import EventBus from '@/utils/EventBus'
// 通過調用 bus.$emit('自定義事件', 數據) 觸發自定義事件發送數據
EventBus.$emit('share', this.a_data);
接收數據
// b.vue
// 導入 EventBus
import EventBus from '@/utils/EventBus'
// 通過調用 $on('自定義事件', 事件處理函數) 註冊自定義事件接收數據
// 其中，value 即為接收的數據
EventBus.$on('share', value => {
this.b_data = value;
})
移除事件
在組件離開，也就是被銷毀前，需要將該監聽事件給移除，以免下次再重覆創建監聽
// b.vue
// 移除監聽事件 "share"
EventBus.$off('share')
完整代碼
utils/EventBus.js
import Vue from 'vue'
// 向外共用 Vue 的實例對象
export default new Vue()
A 組件代碼
<template>
<div>
<button @click="send">點我發送消息</button>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data:()=>({
a_data: 'message'
}),
methods: {
send () {
EventBus.$emit('share', this.a_data);
}
}
}
</script>
B 組件代碼
<template>
<div>
<h1>{{ b_data }}</h1>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data: () => ({
b_data: null
}),
created () {
EventBus.$on('share', value => {
// 將 A 組件傳遞過來的數據保存到 B 組件
this.b_data = value;
})
},
beforeDestroy() {
// 移除監聽事件 "share"
EventBus.$off('share')
}
}
</script>
