组件通信问题
父子组件通信:
props 和event、 v-model、.sync、 ref、 $parent和 $children
非父子组件通信:
$attr 和 $listeners provide 和 inject. eventbus 、通过跟实例$root vuex、dispatch和brodcast
父给子传值
1 | // child: |
子给父传值
1 | // child |
事件总线
任意两个组件之间传值常用事件总线或 vuex的方式
1 | // |
兄弟组件之间通信可以通过共同祖辈$parent或者$root
// brother1
this.$parent.$on(‘event’, handleEvent)
//brother2
this.$parent.$emit(‘event’)
$children
父组件可以通过$children访问子组件实现父子通信
1 | //parent |
$attr/$listeners
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当一个组件没有 声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外),并且可以通过 v- bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。
1 | // child:并未在props中声明foo <p>{{$attrs.foo}}</p> |
refs
获取子节点引用
1 | // parent |
provide/inject
能够实现祖先和后代之间传值
1 | // ancestor |