vue2使用bus.js进行兄弟组件通信

前言，父子组件中可以用props和$emit()

如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，在相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递

创建一个bus.js文件，导出一个vue的实例

import Vue from 'vue'

export default new Vue()

接下来就是要组件通信了

先import引入bus.js，添加一个$emit的事件按钮

<template>
    <div id="emit">
        <button @click="bus">按钮</button>
    </div>
 </template>

<script>
    import Bus from './bus.js'
    export default {
        data() {
            message: ''
        },
        methods: {
            bus() {
                Bus.$emit('msg', '我要传给兄弟组件们，你收到没有')
            }
        }
    }
</script>

<style></style>

打开要通信的另外一个组件，import引入bus.js

在钩子函数中监听msg事件

<template>
    <div id="on">
        <p>{{message}}</p>
    </div>
</template>

<script>
    import Bus from './bus.js'
    export default {
        data() {
            return {
                message: ''
            }
        },
        mounted() {
            let self = this;
            Bus.$on('msg', (e) => {
                self.message = e;
                console.log(`传来的数据是: ${e}`);
            })
        }
    }
</script>

<style></style>

p元素中的message会变成“我要传给兄弟组件们，你收到没有”