Vue组件通信方式总结

---

一、父组件 => 子组件

属性 props

//child
props: {msg: String}

//parent
<HellowWorld msg="welcome to your vue.js App" />

特性 $attrs

//child, 并未在props中声明foo
<p>{{$attrs.foo}}</p>

//parent
<HellowWorld foo="foo" />

引用 refs

//parent
<HellowWorld foo="hw" />

mounted(){
  this.$refs.hw.xx = 'xx'
}

子元素$children

//parent
this.$children[0].xx = 'xxx'

二、子组件 => 父组件: 自定义事件

//child
this.$emit('add', good)

//parent
<Cart @add="cartAdd($event)" ></Cart>

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

通过共同祖辈组件搭桥,$parent或#root

//brother1
this.$parent.$on('foo', handle)
//brother2
this.$parent.$emit('foo')

四、祖先和后代之间

由于嵌套数过多,传递props不切实际,vue提供了provide/inject API完成该任务

provide/inject: 能够实现祖先给后代传值

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

//descendant
inject: ['foo']

五、任意两个组件之间: 事件总线或vuex

事件总线: 创建一个Bus类负责事件派发,监听和回调管理

 //Bus,事件派发,监听和回调管理
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()

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

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

实践中可以用Vue代理Bus,因为它已经实现了相应功能

vuex: 创建唯一的全局数据管理者store,通过它管理数据并通知组件状态变更