vue组件间通信基本的三种方式

1. 父传子

父组件代码

子组件代码

2. 子传父

父组件代码

子组件代码

3. 兄弟组件之间的数据共享

在vue2.x 中，兄弟组件之间数据共享的方案是EventBus。

首先，创建EventBus.js模块，并向外共享一个Vue的实例对象，这样在组件A和B中，才能 *** 作同一个对象。

如果在数据发送方（组件A）用 this.$emit 触发自定义事件，这个 this 指的是组件A实例；同样，如果在数据接收方（组件B）用 this.$on 绑定自定义事件，这个 this 指的是组件B实例。

EventBus.js

import Vue from 'vue'

export default new Vue()

在数据发送方，调用bus.$emit(‘事件名称’, 要发送的数据)方法触发自定义事件

兄弟组件A（数据发送方）

import bus from './eventBus.js'

在数据接收方，调用bus.$on（‘事件名称’，事件处理函数）方法注册一个自定义事件

兄弟组件B（数据接收方）

import bus from './eventBus.js'