Vue通过EventBus实现兄弟组件间通信

Vue中父子组件通信的方式是：父组件通过props向下传递数据给子组件，子组件通过$emit事件告诉父组件。对于没有引用关系的兄弟组件，若不需要Vuex，可以考虑通过EventBus(即事件总线)来实现通信。

初始化

有两种初始化方式，一种实例化一个新的Vue对象来创建，推荐放到一个单独的js文件中。

var eventBus = new Vue()

另外一种是直接在main.js中挂载到prototype上。

Vue.prototype.$EventBus = new Vue()

发送事件

EventBus.$emit("msgName", msg)

假设有两个兄弟组件，组件a和组件b。通过点击组件a向组件b传值。

组件a:

<!-- 组件A -->
<template>
<button @click="sendMsg()">按钮A, 向B传值</button>
</tempalte>

<script>
	import {eventBus} from "./EventBus.js"
    export default {
        data(){
            return {
                msg: "组件A的值"
            }
        }
        methods: {
            sendMsg(){
                eventBus.$emit("fromA2B", this.msg)
            }
        }
    }
</script>

接收事件

EventBus.on("msgName", function)

<!-- 组件B -->
<template>
<button @click="reset()">{{msg}}</button>
</tempalte>

<script>
	import {eventBus} from "./EventBus.js"
    export default {
        data(){
            return {
                msg: "按钮B,准备接收A的值"
            }
        }
        watch:{
        	msg(newVal, oldVal){
                console.log('B的值改变了')
            }
    	},
		mounted(){
            eventBus.$on("fromA2B", e => {
                this.msg = e
            })
        }
    }
</script>

事件移除

在Vue页面销毁后，需要移除EventBus事件监听。

import { eventBus } from './Event-bus.js'
eventBus.$off('fromA2B', {})