vue组件间通信之兄弟组件通信（vue3.0$EventBus）

vue组件间通信之兄弟组件通信（vue3.0$EventBus）

vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到
vue 中的事件总线 EventBus的概念

EventBus的简介

EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

EventBus的使用
初始化
要用EventBus，首先要在main.js中初始化一个EventBus，这里称它为全局事件总线。

Vue.prototype.$EventBus = new Vue();//全局注册一个事件总线

接收事件和发送事件

发送事件的语法：this.$EventBus.$emit(发送的事件名,传递的参数)
接收事件的语法：this.$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.$EventBus.$off(要移除监听的事件名)

● EventBus.$off(“eventName”, callback); 只移除这个回调的监听器。

● EventBus.$off(‘eventName’); 移除该事件所有的监听器。

● EventBus.$off(); 移除所有的事件监听器，不需要添加任何参数。

        beforeDestroy(){
            //移除监听事件
            this.$EventBus.$off("cut-change");
            this.$EventBus.$off("add-change");
        }