vue非父子组件通信

关于非父子组件通信的解决办法，vue的官网也有明确的说明，即：通过$emit和$on的方式进行通信。

而我刚学习时，查了很多网上写的例子，对我这样的初学者还是不太友好，就像下面这种：

简单一看，咦～这么简单（其实用法确实如此）。好，直接复制粘贴到自己的项目中去，然后才发现，我去～怎么不能用！。大家是不是像我一样是这么写的：

组件A

<script>
import Vue from 'vue'
export default{
    mounted(){
        var bus = new Vue();
        bus.$emit('change',1);
        //或者干脆这样
        //this.$emit('change',1);
    }
}

</script>

组件B

<script>
import Vue from 'vue'
export default{
    mounted(){
        var bus = new Vue();
        bus.$on('change',1);
        //或者这样
        //this.$on('change',function(val){})
    }
}

</script>

我相信肯定有这样的同学，今天也主要是为这些同学解决问题的，当然，不会用$emit的同学也可以继续往下看。

我们要知道，在我们当前的开发中，每个组件都是一个单独的模块，我们直接用var声明肯定是不行的，那么我们该怎么做呢，其实也简单，我们可以新建一个js文件，就建在components文件夹下，跟当前我们的组件在同一个目录下，我们叫它bus.js，就像下边这张图所示：

跟我们组件所在同一个目录，然后bus.js如何写呢我们看下图的写法:

ok，现在我们已经把空的vue实例创建完成，接下来我们只需要把我们上边组件A和B的写法改一下，就可以了，就像这样：

ok，现在运行一下，是不是发现可以了。

总结：就像官方说的那样，非父子组件间通信，需要new一个空的vue实例，当作事件总线，当然必须是在同一个vue实例上，而我们刚开始的哪种写法，很明显是创建了两个vue实例对象，当然是不可以的，所以我们就需要创建一个bus.js文件，导出一个vue实例，这样在其他地方我们使用的就是同一个实例了。