vue中子组件和子组件之间怎么通信_vue2.0组件之间通信（父子、子父、平级）

组件间通信无外乎父传子、子传父和兄弟间传递，在不使用vuex情况下，组件间如何通信呢，来看下面总结的(原文：Vue2.0组件之间通信)

一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props，然后创建一个名为message的属性child.png

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值App2.png

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

browser.png

5.我们依然可以对message的值进行v-bind动态绑定App3.png

此时浏览器中browser2.png

父组件向子组件传值成功

总结一下：

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

父组件中注册子组件

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

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

二.子组件向父组件传值

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

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

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

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

子组件向父组件传值成功

总结一下：

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

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

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

三、兄弟组件之间传递

无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线,我们了解到这个之后就开始来写个Demo吧。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

我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数

PS:

mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。

$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。4 . 在父组件中，注册这两个组件，并添加这两个组件的标签App2.png

保存所有修改的文件，然后打开浏览器窗口，内容如下(css请自行处理)browser.png

点击向组件传值按钮，我们可以看到传值成功browser2.png

总结：创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁

在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数

在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

题外话：

1.在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

2.看过笔者上一篇Vue2.0子父组件通信这篇文章的同学可以感觉到，平级组件之前的通信其实和子组件向父组件传值有些类似，其实他们的通信原理都是相同的，例如子向父传值也是$emit和$on的形式，只是没有eventBus，但若我们仔细想想，此时父组件其实就充当了bus这个事件总线的角色。

3.这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理