Vue非父子组件之间的通信（不应用Vuex）

2017-10-04

在做Vue父子组件间的通信时，更多的方法是采用Vuex这个状态管理管理工具，相对来说比较方便。但是在读官方文档时，会看到文档采用$on、$emit来实现通信效果，但在不用Vuex的情况下，到底如何应用这两个API呢？

Vue的文档对非父子组件通信的说明是采用创建一个空的Vue实例作为中介，然后应用$emit、$on两个API来达到信息传递的效果

现在用Vue开发，基本上都会采用webpack搭建，使用官方提供的Vue-Cli脚手架工具，但是这里面的的问题是，在什么位置创建这个空的Vue实例呢？尝试过很多方法，也试过在vue的组件内部分别创建，运行后不起作用，仔细思考一下，这个实例也只是对该组件起作用，并不会影响到其它的组件。

再看一下官网的API文档，看到了有$root这个方法，可以访问到根实例，这样就可以在根实例中定义一个空的Vue实例供组件调用。而根实例当然就是入口文件，用脚手架的话就是main.js这个文件。具体的方法为：

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App },
    data(){
        return {
            Bus: new Vue()
        }
    }
})

将Bus定义在data中，任何组件都可以访问到。现在就可以定义两个组件来试验一下(随便写的两个组件，记得配置路由，具体代码就不贴出来了)：

组件A:

<template>
    <div>
        <button @click="increment">{{ count }}</button>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                count: 0,
                count1: '你好'
            }
        },
        methods:{
            increment(){
                this.count++;
                this.$root.Bus.$emit('increment', this.count1);
            }
        }
    }
</script>

组件B:

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default{
        data(){
            return {
                msg: '晚安'
            }
        },
        created(){
            this.$root.Bus.$on('increment', function(msg1){
                console.log(msg1)
            })
        }
    }
</script>

组件A是一个按钮，定义了点击事件，点击后可以让数字加1；组件B只是简单的展示。在组件A上用$emit触发当前实例上的increment事件，同时将count1作为参数传递出去，组件B应用$on监听increment事件，同时获得所传的参数，并在控制台上打印出来。当点击组件A的按钮后，就可以在组件B的控制台上看到了“晚安”两个字，这样也就按着官网的方法实现了非父子组件间的通信。

其实这并不是推荐方式，最好还是使用官方推出的Vuex状态管理工具，所有组件的状态都能提取出来，更加方便管理。这里介绍的方法只是想应用官方文档说明的方式来做出一个具体的实例。　　