Vue中组件通信常用方式

组件通信常用方式：

1.props 父给子传值

// child
props: {msg: String}
// parent

2.自定义事件：字给父传值

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

3.事件总线：任意两个组件之间传值常用事件总线 或 vuex的方式。

// 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))}
}}
Vue.prototype.$bus = new Bus()
this.$bus.$on('foo',handle)

4.vuex

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

5.$parent/$root

兄弟组件之间同学可通过共同祖辈搭桥，$parent或$root

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

6.$children 父组件可以通过 $children访问子组件实现父子通信

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

7.$attrs/$listeners 

 包含了父作用域中不作为prop被识别（且获取）的特定绑定（class和style除外），且可以通过v-bind = "&attrs"传入内部组件。

// child: 并未在props中声明foo
{{$attrs.foo}}
// parent

8.refs 获取子节点引用

// parent

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

9.provide/inject 能够实现祖先和后端传值

// ancestor
provide() {
  return {foo: 'foo'}
}
// descendant
inject: ['foo']

APP.vue

Son1.vue

Son2.vue