步步深入，理解vue的双向绑定 二（vue的订阅者模式）

在Vue开发中，一些大型项目或者涉及到一些很复杂的组件，需要在不同父组件下面的子组件或者孙组件之间传递数据的。如下图：

可以看出，数据从2号传到4号，就得经过7号，10号，再从10号传到8号，再传到4号，过程非常复杂，代码也显得非常臃肿，难以维护。显然仅仅用单向数据流或者双向绑定，并不能很好的满足我们的开发要求。

这时候，我就推荐使用全新的开发模式，发布-订阅模式，它是基于Vue的$on,$on,off,$emit这三个API开发。原理是创建一个事件中心绑定到每个组件上面，只要有一个组件的有新的数据发布到上面，其他已经订阅的组件就可以同步获取。如图：

这样一来，1号组件向4号组件发送数据，只要经过事件中心就行了，而4号组件只要$on订阅，这样就能获取数据。

好的，原理就先说到这里，下面来个栗子：

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

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

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