浅析vue中的组件通信

为了方便展示，所有的组件都是以 单文件组件的方式编写的

1. 父组件对子组件通信

在父组件内使用 v-bind绑定自定义事件，在子组件内使用 props传递 自定义的事件名称

如下是父组件

如下是子组件

2.子组件对父组件通信

子组件对父组件通信我们只能通过 自定义事件去进行触发，而无法像 父对子通信那样直接进行数据传递

首先我们必须了解Vue暴露两个实例方法

• vm.$emit( event, […args] )，触发当前实例上的事件，附加参数都会传给监听器回调
• vm.$on( event, callback )，监听当前实例上的自定义事件，事件可以由vm.$emit触发，回调函数会接收所有传入事件触发函数的额外参数

总结一下：我们用$on去监听一个自定义事件，这个自定义事件由$emit触发，触发的同时将data放在附加参数里，传给$on接收

如下是父组件

如下是子组件

3.兄弟组件之间进行通信

主要我们通过全局注册一个 eventBus单文件组件，这个组件的作用充当着 vm.$emit( event, […args] )里的 vm，其它形式与第二小节类似，不作过多说明了

新建一个js文件，作为EventBus

import Vue from 'vue' // 导入vue模块

export default new Vue({}) // 新建一个空的vue实例作为EventBus

如下是父组件

如下是子组件1

如下是子组件2

如果你不使用 单组件文件，可以看下面的例子