完全搞懂vue组件通信---props/emit自定义事件/EventBus/$ref/provide_inject/$attrs_$listeners

本篇博客所有的代码均在github上： https://github.com/zuxian/

---

总结

• 父子通信：

父向子传递数据是通过props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
$ref也可以访问组件实例；
provide / inject API；
$attrs/$listeners

• 兄弟通信：

Bus；Vuex

• 跨级通信：

Bus；Vuex；provide / inject API、$attrs/$listeners

---

1，父 ==> 子（props）

---

2，子 ==> 父（emit自定义事件）

---

3，非父子组件通信(EventBus) ---`$emit、 $on 、$off`

组件APP.vue （同时引入Hello.vue组件和World.vue组件）

methods: {
      sendParam () {
       bus.$emit('getParam', this.number) } }

created () {
      bus.$on('getParam', param => {
      this.number = param }) },
beforeDestroy () {
       bus.$off('getParam') }

• bus.js

import Vue from 'vue'
const bus = new Vue();
export default bus

• 组件Hello.vue
  

• 组件World.vue
  

• 组件APP.vue （同时引入Hello.vue组件和World.vue组件）
  

---

4，$ref

• ref：
  如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
  如果用在子组件上，引用就指向组件实例

compA.vue

APP.vue

---

5，祖 ==> 孙（provide/inject）

参考11

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。
在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

---

6，跨级组件 `$attrs与$listeners`

• • $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
• • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
• • inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承（简单的说，inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性）

• APP.vue
  

• Child1.vue
  

• Child2.vue

• 结果：

---

7，vuex