Vue开发模式：发布-订阅模式

1.我只知道一点点的订阅模式, 还没有详细看, 看个图吧(其实就是学兄弟组件传值时是一个知识点, 当初不知道这个是发布订阅模式)

2.现在遇到的是Vue实现一个Tabs切换

我学习过, 原生js切换, vue的路由切换, 这次用Vue实现和原生的道理是一样的

3.想要实现这个当前item, 匹配下面的对应的东西(按顺序看不乱)

4.这样很杂, 就要使用发布订阅模式了(这里就是使用eventbus = new Vue(), 和兄弟组件传值一个思路,就是依靠了中间人一样)

这是原理, 但是不能使用兄弟组件那样, 这里存在爷孙组件, 可以使用另一个东西,举个例子

父组件：//创建事件中心
data(){
  return {
    eventBus: new Vue()
  }
},
provide(){
  return {
  eventBus: this.eventBus
  }
}

子组件：//注入事件中心
inject: ['eventBus']
然后，无论子组件还是父组件都能通过这样来传递数据：

this.eventBus.$emit() // 发布
this.eventBus.$on() // 订阅
this.eventBus.$off() // 取消订阅