vue中组件通信的几种常见方法

1 props 和 $emit

props 父传子

// 父组件
 <a-box :cList="fList"></a-box>
// 子组件
props: {
  cList: Array,
}

$emit 子传父

// 子组件
methods: {
  f1() {
    this.$emit("sendMsg", this.cMsg);
  },
},
// 父组件
 <a-box @sendMsg="getMsg"></a-box>
methods: {
  getMsg(v) {
    console.log(v); // box
  },
}

2 vuex 这种通信方式属于全局通信方式，一般用在中大型项目中。
如果业务逻辑复杂，很多组件之间需要处理一些公共的数据，就可以用到Vuex。Vuex就是将这一些公共数据抽离出来，那么其他组件就可以对这个公共数据进行读写操作。

3 $parent 和 $children
ref：在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，就指向组件实例。
parent / children：访问父 / 子实例，这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

4 provide 和 inject 用于父组件向子孙组件传递数据
provide在父组件中向下传数据；inject在下级组件中接收数据。
通过provide/inject可以轻松实现跨级访问父组件的数据。

5 中央事件总线
跨组件通信，常用于兄弟组件间通信。
是通过新建一个 vue 实例，然后在需要通信的组件间引入，通过 emit 方法触发事件，通过 on 来监听相应事件来实现的。

先定义bus文件：

import Vue from 'vue' // 新建一个vue实例
const Bus = new Vue()
export default Bus

引入文件 import Bus from '@/bus'

或者将bus挂载到全局使用，在main.js中添加以下代码：

import Bus from './bus'
Vue.prototype.$bus = Bus

使用时直接调用就可以了，this.$bus.$emit()，this.$bus.$on()

// 组件A
<div @click="sendMsg()">A</div>
sendMsg() {
  this.$bus.$emit("aMsg", this.msg);
},
// 组件B
mounted() {
  this.$bus.$on("aMsg", (msg) => {
    console.log(msg);
  });
},