非父子组件通信的方法

聚沙成塔·每天进步一点点

? 专栏简介

Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

---

在Vue中，实现非父子组件通信有多种方法，根据项目的需求和复杂性，开发者可以选择适合的方式。以下是一些常用的非父子组件通信方法：

1. 中央事件总线 (EventBus)

中央事件总线是一个空的 Vue 实例，用作组件之间的通信中心。组件通过触发和监听事件来实现通信。

发送事件的组件：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event', 'Hello from sender!');
    },
  },
};
</script>

接收事件的组件：

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      receivedMessage: '',
    };
  },
  created() {
    EventBus.$on('custom-event', (message) => {
      this.receivedMessage = message;
    });
  },
};
</script>

2. Vuex 状态管理

Vuex 是 Vue.js 应用程序开发的状态管理模式。它集中管理应用的状态，并提供了一种可预测的方式修改状态。

配置 Vuex：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: '',
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    },
  },
});

使用 Vuex 的组件：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
    <p>{{ $store.state.message }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setMessage', 'Hello from sender!');
    },
  },
};
</script>

3. Provide / Inject

provide 和 inject 是 Vue 提供的一种高级选项，可以在祖先组件中使用 provide 提供数据，而在后代组件中使用 inject 来注入这些数据。

祖先组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from provider!',
    };
  },
};
</script>

后代组件：

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    injectedMessage() {
      return this.message;
    },
  },
};
</script>

4. $attrs 和 $listeners

每个组件实例都有 $attrs 和 $listeners 属性，可以用于在父组件中访问子组件的属性和监听事件。

<!-- 子组件 -->
<template>
  <div>
    <!-- 子组件的模板 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello from child!');
  },
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(message) {
      console.log(message);
    },
  },
};
</script>

5. 第三方状态管理库

除了 Vuex 外，还可以使用其他的第三方状态管理库，例如 Redux 或 MobX。这些库提供了更多高级的状态管理和通信机制，适用于大型应用。

这些是一些用于非父子组件通信的常见方法。根据项目的具体情况，可以选择最合适的方式，以实现灵活而高效的组件通信。

---

? 写在最后

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，