在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信。但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信?父组件与子组件间就不说了,关于兄弟组件间通信,这里有个简单方法。
1.新建bus.js,new一个Vue实例:
import Vue from 'vue';
export default new Vue;
2.需要通信的组件都引入该bus.js
import Bus from '@/util/bus';
3.调用Bus的触发事件和监听事件实现通信
Bus.$emit('changeIndex', index);
Bus.$on('changeIndex', (index) => {
this.navIndex = index;
});
这里的bus.js可以理解为是公共汽车,这个bus的作用就是行驶在各个组件之间从而实现组件间通信、参数传递,写起来也比较方便,这种实现方式Vue官网也有介绍,可以通过单独的事件中心管理组件间的通信:eventHub
。