vue组件通信（父传子，子传父，兄弟组件传值）

vue的组件通信

vue组件通信有以下几种方式

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

1. 父组件传子组件

使用props来实现
在父组件的子组件标签上绑定一个自定义属性，用于绑定要传递的值，在子组件中使用prop属性进行数据的接受，可以直接使用，绑定的属性名和prop定义的名字必须一致，否则无法接受数据
父组件如下：

子组件如下：

2. 子组件传父组件

通过自定义事件来实现
在子组件元素中绑定一个事件，点击触发事件，事件中使用$emit(自定义事件，传递的值),向父组件发布信息，在父组件的子组件元素上绑定一个自定义事件，事件名必须是$emit中的事件名，自定义事件调用父组件自己定义的函数
父组件如下：

子组件如下：

3. 兄弟组件传值

定义一个eventBus.js文件，导出一个空的vue对象，在兄弟组件中引入bus.js的文件，在A组件通过bus.$emit()传递，在B组件中的created函数中，使用bus.$on接受
根组件如下：

兄弟A组件如下

兄弟B组件如下

4. 通过vuex来实现组件传值

首先通过 npm install vuex --save 安装vuex
然后在src中新建一个store文件夹，在文件夹中新建一个 index.js 文件
index.js中的内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  // 初始化A和B组件的数据，等待获取
  AMsg: '',
  BMsg: ''
}

const mutations = {
  receiveAMsg(state, payload) {
    // 将A组件的数据存放于state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 将B组件的数据存放于state
    state.BMsg = payload.BMsg
  }
}

export default new Vuex.Store({
  state,
  mutations
})