Vue多层组件之间数据通信

1.通过全局事件总线来通信：

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
  //安装全局事件总线，就是在创建之前，给Vue实例添加一个对象，并将Vue实例赋值给这个对象，使这个对象可以作为Vue实例使用
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

组件发送数据：

组件接收：

2.$attrs / $listeners（多层嵌套组件传递数据或者方法）

使用过程中，如果有存在中间的组件截取了props，那么这个值将不会继续向下传递。相反传递给父元素则没有这个问题。

// parent组件

// 子组件

// 孙子组件

3.provider和inject，传递响应式：

provider(){
    return {
        obj:this.obj, //通过浅拷贝达到响应式
        message:()=>this.message //用函数的形式返回一个响应式数据
    }
}
 
inject:["obj","message"] //这里message不再是变量而是函数，使用时要加小括号，调用函数，可配合计算属性使用