vue中非父子组件通信—EventBus

在大型项目中，使用vue进行开发，非父组件传值通常会使用vuex状态管理。今天将要聊的是eventBus（事件总线/发布订阅者模式），它也可以进行非父组件通信，通常会用在一些非常简单的小demo中。

关于发布订阅者模式之前的一篇文章有详细介绍到：

https://blog.csdn.net/qq_42778001/article/details/96692000

原理就是：通过实例化一个空的Vue实例，借用空Vue实例上的$on和$emit方法，实现两个组件间的数据传递（$on去监听另一个组件上$emit的变化）。

下边看代码：需求组件son2的数据要传给组件son1

<div id="app">
  <son1></son1>
  <son2></son2>
</div>

<script>
//实例化一个空Vue实例
var eventBus = new Vue();

//子组件son1
var son1 = {
    template:`
        <div>
            <h1>接收son2传递来的数据：{{info}}</h1>
        </div>
    `,
    data(){
        return{
            info:null
        }
    },
    mounted() {
        // eventBus.$on('get-son-info',function(val){
        //     console.log(this) //this指向空vue实例，没有vnode（虚拟dom）
        //     this.info = val
        // })   
        eventBus.$on('get-son-info',(val)=>{
            this.info = val
        }) 
    },
    beforeDestroy() {
        eventBus.$off('get-son-info')
    },
} 

//子组件son2
var son2 = {
    template:`
        <div>
            <button @click='emitInfo'>向son1传递数据</button>
        </div>
    `,
    data(){
        return{
            name:'呆呆君'
        }
    },
    methods:{
        emitInfo(){
            eventBus.$emit('get-son-info',this.name)
        }
    }
}
//根实例
var vm = new Vue({
    el:'#app',
    data(){
        return{}
    },
    //组件注册
    components:{
        son1,
        son2
    }
})
</script>

上边代码，有个坑，在组件son1中，如果$on的回调函数不使用箭头函数，里边的this指向创建的空Vue实例，本来想去给组件data对象中的数据赋值，结果由于this指向问题，赋值失败。解决办法：使用箭头函数，箭头函数中的this指向父级，上边代码指向son1组件的实例。