Vue-eventBus兄弟通信(provide和inject)

一、provide 和 inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。

inject 选项应该是：

• 一个字符串数组
• 一个对象，对象的 key 是本地的绑定名，value 是：
  • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
  • 一个对象，该对象的：
    • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
    • default property 是降级情况下使用的 value

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

二、eventBus

兄弟组件之间的数据通讯非常不方便。在Vue中有其他的方式来处理兄弟组件之间的数据通讯，比如Vuex这样的库。但在很多情况之下，咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通讯，而可以考虑Vue中的 事件总线。

三、全局 eventBus 

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

// main.js

Vue.prototype.$EventBus = new Vue()

四、局部 eventBus

//tabs.vue

 provide() {
    return {
      eventBus: this.eventBus
    };
  }

 //tabs-nav-items.vue 

    <div class="tabs-items" @click="xxx">
        <slot></slot>
    </div>

  inject:['eventBus'],
   created() {
       this.eventBus.$on('update:selected',(name)=>{
           console.log(name);
       })
   },
   methods:{
       xxx(){
           this.eventBus.$emit('update:selected',this.tagName)
       }
   }

需求点击 items 切换 content 和 items

使用 eventBus 可读性太差，只能处理少部分数据，大量数据使用vuex

eventBus 通常会在一个兄弟组件之中 emit 事件，并把当前的this实例作为第二个参数，其他兄弟组件监听事件拿到参数并和自身的this做比较

五、project 的其他用法

同样是为了兄弟组件的通信，eventBus 的可读性太差，那么我们可以 provide 一个组件的根组件

    provide() {
      return {
        rootTabs: this
      };
    },

这样可读性和实用性大幅度上升