vue组建通信的几种方式

一、父组件 ===》 子组件

1、props

父组件：

<HelloWorld msg="Welcome to Your Vue.js App"/>

子组件：

props:{msg:String}

2、refs

父组件：

<HelloWorld ref="hw"/>

调用子元素的方法以及属性
this.$refs.hw.xx=xxx

3、子元素children

父组件：

<HelloWorld />

调用第一个子元素的方法以及属性
this.$children[0].xx=xxx

注：
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

二、子组件 ===》 父组件

（观察者模式）
子组件：

this.$emit('test',data)

父组件：

<HelloWorld @test="testFun($event)"/>

三、兄弟组件：通过共同祖辈组件

通过共同祖辈组件$parent或者$root
兄弟组件1：

this.$parent.$emit('test')

兄弟组件2：

this.$parent.$on('test',handle)

四、祖先和后代之间

使用props传递层级较多，使用provide 和 inject
类型：
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }

// 父级组件提供 'foo'
  provide: {
    foo: 'bar'
  }
// 或者：  provide()=> {
 //   foo: 'bar'
 // }

// 子组件注入 'foo'
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }

注意：
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

四、任意两个组件之间

事件总线或VUX

1、事件总线：创建一个Bus类负责事件派发，监听和回调管理

//bus.js
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;

//子组件1
import bus from '@/utils/bus';
bus.$emit('collapse-content', msg);

//子组件2
import bus from '@/utils/bus';
bus.$on('collapse-content', msg => {
    this.collapse = msg;
}); 

2、vuex