Vue 中如何进行非父子组件通信？

说在前面

❝

🎈在构建复杂的 Vue 应用程序时，我们经常会遇到需要在非直接父子关系的组件之间进行通信的情况。本文将深入探讨 Vue 提供的多种非父子组件通信方法，并提供实用的代码示例和应用场景。

常见通信方法

❝

在 Vue.js 中，非父子组件之间的通信可以通过多种方式实现。以下是一些常用的方法：

1. 使用事件总线（Event Bus）

事件总线是一种全局通信机制，允许任何组件之间进行通信，无论它们是否有直接的父子关系。你可以创建一个新的 Vue 实例作为事件总线，并在需要通信的组件中触发和监听事件。

// 创建事件总线
const EventBus = new Vue();

// 在组件 A 中触发事件
EventBus.$emit('event-name', data);

// 在组件 B 中监听事件
EventBus.$on('event-name', (data) => {
  // 处理事件
});

2. 使用 Vuex

Vuex 是 Vue 的状态管理库，它提供了一个集中式存储来管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通过改变状态，你可以在任何组件中响应状态的变化。

// 在组件 A 中提交 mutation
this.$store.commit('mutation-name', payload);

// 在组件 B 中监听 state 的变化
computed: {
  stateValue() {
    return this.$store.state.someState;
  }
}

3. 使用 provide/inject

Vue 提供了 provide 和 inject API，允许父组件向所有子孙组件注入一个依赖，而不论组件层次结构的深度如何。

// 在父组件中 provide 依赖
provide() {
  return {
    someData: this.someData
  };
}

// 在任何子孙组件中 inject 依赖
inject: ['someData'],

4. 使用 $refs

通过 $refs，你可以访问子组件的公共方法和属性。这通常用于直接调用子组件的方法，但不建议用于频繁的通信，因为它破坏了组件之间的封装。

// 在父组件中
<child-component ref="child"></child-component>

// 通过 $refs 调用子组件的方法
this.$refs.child.someMethod();

5. 使用全局事件监听器

你可以在 Vue 应用实例上添加全局事件监听器，然后在任何组件中触发这些事件。

// 在应用实例上添加全局事件监听器
Vue.prototype.$on('global-event', (data) => {
  // 处理事件
});

// 在任何组件中触发全局事件
this.$emit('global-event', data);

6. 使用第三方库

有一些第三方库，如 vue-socket.io 或 vue-pubsub，提供了额外的通信机制，可以用来在组件之间传递消息。

选择最佳方法

选择哪种方法取决于你的应用需求和通信的复杂性。对于简单的通信，事件总线或全局事件监听器可能是足够的。对于复杂的状态管理，Vuex 可能是更好的选择。而对于需要深入组件层次结构的通信，provide/inject 或 $refs 可能更合适。

在设计通信机制时，考虑到可维护性和可扩展性是很重要的。过度使用全局事件或 $refs 可能会导致难以追踪的 bug 和紧密耦合的代码。因此，推荐优先使用 Vuex 和 provide/inject 这样的声明式方法。

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

❝

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。