vue组件间通信之兄弟组件通信($EventBus)
vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件;子传父通过$emit发送事件,并携带数据给父组件。而有时两个组件之间毫无关系,或者他们之间的结构复杂,如何传递数据呢?这时就要用到
vue 中的事件总线 EventBus的概念
EventBus的简介
EventBus又称事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件
EventBus的使用
初始化
要用EventBus,首先要在main.js中初始化一个EventBus,这里称它为全局事件总线。
Vue.prototype.$EventBus = new Vue();//全局注册一个事件总线
接收事件和发送事件
发送事件的语法:this. E v e n t B u s . EventBus. EventBus.emit(发送的事件名,传递的参数)
接收事件的语法:this. E v e n t B u s . EventBus. EventBus.on(监听的事件名, 回调函数)
见下方示例
ceshi.vue
<template>
<div>
<PageA></PageA>
<hr>
<PageB></PageB>
</div>
</template>
<script>
import PageA from "../../components/ceshi/pageA.vue"
import PageB from "../../components/ceshi/pageB.vue"
export default{
components:{PageA,PageB},
data(){
return{
}
}
}
</script>
<style>
</style>
pageA.vue
<template>
<div class="count-box">
<h5>pageA----数目加减:</h5>
<span class="cut-btn" @click="cut">-</span>
<span class="count">{{count}}</span>
<span class="add-btn" @click="add">+</span>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
// 调用全局Vue实例中的$EventBus事件总线中的$emit属性,
// 发送事件"cut-change"和"add-change",并携带A组件中的count
//减
cut(){
this.count--
this.$EventBus.$emit('cut-change',this.count)//注册事件
},
//加
add(){
this.count++
this.$EventBus.$emit('add-change',this.count)//注册事件
},
}
}
</script>
<style scoped>
.count-box {
display: flex;
align-items: center;
}
.cut-btn,
.add-btn {
background-color: bisque;
border: solid green 1px;
padding: 20px;
margin: 60px 20px;
}
.count {
border: solid black 1px;
padding: 20px;
}
</style>
pageB.vue
<template>
<div>
<h5>pageB----统计:</h5>
<span>{{total}}</span>
</div>
</template>
<script>
export default {
data() {
return {
total: 0,
}
},
created() {
/*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送到事件总线中的cut-change事件和add-change事件*/
this.$EventBus.$on('cut-change', (msg) => {//监听事件
this.total = msg
});
this.$EventBus.$on('add-change', (msg) => {//监听事件
this.total = msg
})
},
methods: {}
}
</script>
<style scoped>
</style>
效果图
移除监听事件
1.解决办法:在组件离开,也就是被销毁前,将该监听事件给移除,以免下次再重复创建监听
2.语法:this. E v e n t B u s . EventBus. EventBus.off(要移除监听的事件名)
● EventBus.$off(“eventName”, callback); 只移除这个回调的监听器。
● EventBus.$off(‘eventName’); 移除该事件所有的监听器。
● EventBus.$off(); 移除所有的事件监听器,不需要添加任何参数。
beforeDestroy(){
//移除监听事件
this.$EventBus.$off("cut-change");
this.$EventBus.$off("add-change");
}