vue2 事件总线event bus 非父子组件间通信

注意

        （1）event bus只能在vue2中使用，vue3中把这个给砍了，而是用第三方库mitt

        （2）在订阅事件的组件里，要在组件销毁之前把监听事件也手动销毁一下。如果不销毁，会累积多次创建监听事件，一旦在B组件里触发了事件发布，组件A就会执行多次事件，滥用也易造成内存泄漏

        销毁方法

//销毁监听事件方法
Bus.$off("sendMsg");

特点

        （1）采用发布订阅模式，可以一对多发送消息，只要监听了事件都可以获得对应消息；例如A组件发布了消息，那么想要获取这个消息的组件可以是很多个，只要监听了就能获取到

        （2）适用于简单的非父子关系组件的通信，例如兄弟组件，复杂场景建议使用vuex

用法

        首先创建一个都能访问到的全局事件总线，也就是一个空vue实例；通常在项目的utils文件夹中建一个js文件，例如utils/eventBus.js

       文件一，事件总线文件内容

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

         文件二，分发数据方

<template>
    <div>
        <h1>分发方</h1>
        <button @click="sending">点我分发数据</button>
    </div>
</template>
<script>
import Bus from '../../utils/eventBus'
export default {
    methods: {
        // 接收消息方法
        sending() {
            // 分发数据出去
            Bus.$emit('sendMsg', '这是要发送的数据')
        }
    }
}
</script>

        文件三，接收数据方

<template>
    <h1 style="margin-top: 50px;">接收方</h1>
</template>
<script>
import Bus from '../../utils/eventBus'
export default {

    created() {
        this.receive();
    },

    methods: {
        // 接收消息方法
        receive() {
            // 监听sendMsg传递过来的数据并做处理
            Bus.$on('sendMsg', (res) => {
                console.log('res', res);
            })
        }
    }
}
</script>

        文件四，用来测试

<template>
    <div>
        <child-one></child-one>
        <child-two></child-two>
    </div>
</template>
<script>
import ChildOne from './childOne.vue'
import ChildTwo from './childTwo.vue'
export default {
    components: {
        ChildOne,
        ChildTwo
    },
}
</script>

        于是点击分发组件按钮，触发分发事件；那么接收方组件，监听获取事件的方法体，会打印出获取到的数据