vue组件之间的通信

VUE组件之间的传递数据是很重要，坑也很多，

一，父组件向子组件传值

1.创建子组件，在src / components /文件夹下新建一个Child.vue
2.Child.vue的中创建道具，然后创建一个名为message的属性

child.png

3.在App.vue中注册子组件，并在模板中加入子标签，标签中添加邮件属性并赋值

App2.png

4.保存修改的文件，查看浏览器

browser.png

5.我们依然可以对消息的值进行V-绑定动态绑定

App3.png

此时浏览器中

browser2.png

组件父子向传组件值成功
总结一下：

子组件在道具中创建一个属性，用以接收父组件传过来的值

父组件中注册子组件

在子组件标签中添加子组件的道具中创建的属性

把需要传给子组件的值赋给该属性

二，子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

Child2.png

2.在响应该点击事件的函数中使用$ EMIT来触发一个自定义事件，并传递一个参数

Child3.png

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

App4.png

4.保存修改的文件，在浏览器中点击按钮

browser3.png

组件子父向传组件值成功
总结一下：

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

将需要传的值作为$ EMIT的第二个参数，该值将作为实参传给响应自定义事件的方法

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

三，兄弟组件之间传递

无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个*事件总线，我们了解到这个之后就开始来写个演示吧。

App.png

1，我们先来创建*事件总线，在src / assets /下创建一个eventBus.js，内容如下

eventBus.png

eventBus中我们只创建了一个新的Vue的实例，以后它就承担起了组件之间通信的桥梁了，也就是*事件总线。

2.创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

firstChild.png

我们在响应点击事件的sendMsg函数中使用$ emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数
PS： $ emit实例方法触发当前实例（这里的当前实例就是bus）上的事件，附加参数都会传给监听器回调。

3。我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

secondChild.png

我们在mount中，监听了userDefinedEvent，并把传递过来的字符串参数传递给了$ on监听器的回调函数
PS：
mounted：是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready ，Vue会在文件加载完毕后调用挂载的函数。
$ on：监听当前实例上的自定义事件（此处当前实例为bus）。事件可以由$ emit触发，回调函数会接收所有传入事件触发函数$发射）的额外参数。

4。在父组件中，注册这两个组件，并添加这两个组件的标签

App2.png

保存所有修改的文件，然后打开浏览器窗口，内容如下（CSS请自行处理）