Vue事件總線怎么用
更新時間：2025年04月02日 11:18:12 作者：Xwzzz_
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1.常見的組件通信方式
- pros：父組件傳子組件
- 自定義事件：子組件傳父組件
- vuex：均可實現(xiàn)
- 插槽：父組件傳子組件
- pubsub-js：均可實現(xiàn)（較少用）
- $bus全局事件總線：均可實現(xiàn)
2.事件總線的介紹
如果咱們的應用程序不需要類似Vuex這樣的庫來處理組件之間的數(shù)據(jù)通信，就可以考慮Vue中的事件總線來實現(xiàn)。它相當于一個全局的倉庫，任何組件都可以去這個倉庫里獲取事件,它就類似溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發(fā)送事件或接收事件，所以組件都可以上下平行的通知其他組件來進行通信。
3.事件總線原理
因為所有組件對象都能看到 Vue 原型對象上的屬性和方法，所以我們可以在Vue的原型對象上通過設定一個bus對象,Vue.prototype.bus = new Vue(),此時所有的組件對象都能看到bus屬性對象。
同時由于Vue 原型對象上包含以下事件處理的方法：
- $on(eventName, listener): 綁定自定義事件監(jiān)聽
- $emit(eventName, data): 分發(fā)自定義事件
- $off(eventName): 解綁自定義事件監(jiān)聽
- $once(eventName, listener): 綁定事件監(jiān)聽, 但只能處理一次
所以我們可以通過組件調用Vue 原型對象中屬性對象bus的方法來實現(xiàn)通信。
4.總線的實現(xiàn)
4.1定義事件總線對象
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//給Vue綁定屬性
Vue.prototype.xyz=100;
// Vue.prototype.$EventBus=vm
new Vue({
beforeCreate(){
//安裝事件總線
Vue.prototype.abc=900;
Vue.prototype.$EventBus=this
},
render: h => h(App),
}).$mount('#app')4.2 向總線發(fā)送事件
語法：this.$EventBus.$emit(發(fā)送的事件名,傳遞的參數(shù))
<!-- -->
<template>
<div id="demo01">
<h1>Demo01組件</h1>
<h2>從Demo02接受的收據(jù)：{{msg}}</h2>
<button @click="fasong">發(fā)送數(shù)據(jù)給Demo02</button>
</div>
</template>
<script>
export default {
name: "Demo01",
data () {
return {
msg: ''
}
},
methods: {
test01 (data) {
console.log(data);
this.msg = data
},
fasong () {
this.$EventBus.$emit("send", "我是Demo01頁面");
}
},
mounted () {
// console.log(this);
// 2.接受全局的haha事件
this.$EventBus.$on('haha', this.test01)
}
}
</script>
<style scoped>
#demo01 {
background-color: red;
padding: 20px;
margin-bottom: 20px;
}
</style>4.3接收總線事件
語法：this.$EventBus.$on(監(jiān)聽的事件名, 回調函數(shù))
<!-- -->
<template>
<div id="demo02">
<h1>Demo02組件</h1>
<button @click="sendData">發(fā)送事件給Demo01</button>
<h2>從Demo01接受的收據(jù)：{{msg}}</h2>
</div>
</template>
<script>
export default {
name: "Demo02",
data () {
return {
msg: ''
}
},
methods: {
sendData () {
// 觸發(fā)全局的haha事件
this.$EventBus.$emit("haha", '老王')
},
display (data) {
console.log(data);
this.msg = data
}
},
mounted () {
// console.log(this.abc);
console.log(this.$EventBus);
this.$EventBus.$on("send", this.display)
}
}
</script>
<style scoped>
#demo02 {
background-color: blue;
padding: 20px;
}
</style>
4.4總線事件解綁
語法：this.$EventBus.$off(要移除事件名)
在組件離開，也就是被銷毀前，要將該監(jiān)聽事件給移除，以免下次再重復創(chuàng)建監(jiān)聽。
beforeDestory () {
//移除事件監(jiān)聽send
this.$EventBus.off("send")
}總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue3?hook重構DataV的全屏容器組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
在我的項目中,甲方要求系統(tǒng)登錄時對密碼進行加密后再傳給后端,指定使用國密SM3,下面這篇文章主要給大家介紹了關于vue普通加密及國密SM2、SM3和sm4使用的相關資料,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了vue使用iframe嵌入網(wǎng)頁的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了深入理解vue中slot與slot-scope的具體使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue插件報錯:Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報錯:Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-07-07
在使用Element Plus中的table組件展示數(shù)據(jù)時,由于需要對表格行內數(shù)據(jù)的數(shù)據(jù)進行修改,下面這篇文章主要給大家介紹了關于Element?Plus修改表格行和單元格樣式的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue組件設計之多列表拖拽交換排序,常見的場景有單列表拖拽排序，多列表拖拽交換排序，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
vue實現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解
下面小編就為大家分享一篇vue實現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Vue2.x通用條件搜索組件的封裝及應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關資料,需要的朋友可以參考下2017-07-07