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 =https://www.cnblogs.com/bkzj/archive/2022/09/30/> {
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 =https://www.cnblogs.com/bkzj/archive/2022/09/30/> {
// 將 A 組件傳遞過來的資料保存到 B 組件
this.b_data = value;
})
},
beforeDestroy() {
// 移除監聽事件"share"
EventBus.$off('share')
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510748.html
標籤：其他