简单的Vue兄弟组件通信

前两天用vue写了点东西，需要在两个组件中通信，因为还没有研究vuex，并且只是简单的通信传值，也没必要麻烦vuex大大。所以就慢慢研究。在这里小记一下

搭建vue环境可以去看我的另一篇文章链接

那么既然说到组件通信必然是要有组件的，这里先简单搞一下组件

首先我们来看一下目录树，这里我新建了一个叫做views的文件夹，里面用来存放我们的各种组件

以选中的inhours.vue为例，组件格式和普通的文件一样

在我们需要引入这个组件的页面里面我们这样写，三个位置，缺一不可，自定义标签的名字与下面import和components的名字必须保持一致，多个组件的话在components中用逗号隔开，这样一个组件就被我们引入进来了

按照上面的方法我们创建两个兄弟组件开始今天的主题

一、我们想要在两个兄弟组件之间通信，需要一个中间的桥梁，那么这个桥梁我们在这里叫他eventbus，我们选择在src/assets中新建他，他是长这个样子的

二、定义桥梁之后我们首先要在我们创建的这两个组件中引入他们

三、两个组件建立完了，就要开始通信了，这里要用到的是  bus.$emit() 和 bus.$on() ，这里的bus是你在组件中import的名字，后面跟的方法，前者是发送数据，后者是监听也就是接受数据，那么我们就可以这样写

在发送页面

上面的sendMsg函数我们选择让他自执行，然后在接收页面写在created钩子中，当然这里只是为了demo效果，你可以选择放在自己需要的地方，图中箭头所指的名称必须保持一致，这样我们就可以看到传过来的信息了

---

不知道到这里你有没有明白，总结起来就三点

~ 新建中央事件线

~ $emit 发送数据

~ $on 监听并接受数据