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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

以上是 Vue2不使用Vuex如何实现兄弟组件间的通信 的全部内容， 来源链接： utcz.com/z/378510.html

回到顶部