以下的解释,是在知乎看到的,感觉粗俗易懂。
组件之间的作用域独立,而组件之间经常又需要传递数据。
A 为父组件,下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦,需要先 $dispatch 到 A,再 $broadcast 到 C。如果项目比较小的话还好,越大的项目,涉及的组件通信就越多、越频繁,此时管理起来就会非常累,而且容易出错。
这就是 Vuex 的意义所在。它可以将数据置于单独的一层,并提供给外部操作内部数据的方法。
Vue 发布了,去掉了 $dispatch 和 $broadcast,已经不会出现通信事件 ping-pong 的情况了。我们需要有一个 Vue 实例来充当通信媒介的作用,Vue 官方文档里将它叫做 event bus。
export default new Vue();
当我们需要组件之间事件通信的时候,只需要对这个 event bus 使用 $emit 和 $on 就可以了。 import Bus from './bus.js';
export default Vue.extend({
template: `
<div>{{msg}}</div>
`, data: () => ({
msg: 'Hello World!'
}), created() {
Bus.$on('setMsg', content => {
this.msg = content;
});
}
}); import Bus from './bus.js'; export default Vue.extend({
template: `
<div @click="sendEvent">Say Hi</div>
`, methods: {
sendEvent() {
Bus.$emit('setMsg', 'Hi Vue!');
}
}
});