Vue组件间通信方式都有哪些

• 父子通信
• 兄弟组件通信
• 祖孙与后代之间的通信
• 非关系组件之间的通信

组件间通信的方案

整理vue中8种常规的通信方案
1、通过props传递
2、通过$emit触发自定义事件
3、使用ref
4、EventBus
5、provide与inject
6、Vuex

props 传递数据

• 适用场景：父组件传递数据给子组件
• 子组件设置props属性，定义接收父组件传递过来的参数
• 父组件在使用子组件标签中通过字面量来传递值

Children.vue

props:{
	name:{
		type:String,//数据类型
		default:'小明'//默认值
	}
}

Father.vue组件

<Children name:"小军" />

$emit 触发自定义事件

• 使用场景:自组件传给父组件
• 子组件通过$emit触发自定义事件,事件的第一个参数是事件名,第二个参数为要传递的值
• 父组件通过监听器获取到子组件传递过来的参数

Children.vue

this.$emit('add',good)

father.vue

<children  @add='cartAdd($event)'></children>

ref

• 父组件在使用子组件的时候设置ref,然后通过ref获取子组件的实例

<children  ref='foo'></children>

this.$ref.foo //获取实例

EventBus

• 使用场景:兄弟组件传值
• 创建一个js文件,创建一个类
• 兄弟组件之间通过$emit触发自定义事件,
• 另一个兄弟组件通过$on监听自定义事件
  Bus.js

// 创建一个中央时间总线类

class Bus {
  constructor() {
    this.callbacks = {};   // 存放事件的名字
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

// main.js

Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue

this.$bus.$emit('foo')

Children2.vue

this.$bus.$on('foo', this.handle)

provide 与 inject

• 在祖先组件定义provide属性,返回传递的值
• 在后代组件通过inject 接收组件传递过来的值

祖先组件

provide(){
	return {
		foo:'foo'
	}
}

后代组件

inject:['foo']

vuex

• 适用场景:复杂关系的组件数据传递
• state用来存放共享变量的地方
• getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
• mutations用来存放修改state的方法。
• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

• 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择$bus
• 祖先与后代组件数据传递可选择 Provide与 Inject
• 复杂关系的组件数据传递可以通过vuex存放共享的变量