Vue2不使用Vuex如何实现兄弟组件间的通信

2024-10-20 04:03:35

在一些正规的大型项目的企业级开发过程中我们一般会引入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。

最新文章

热门文章