Vue.js 非父子组方法详解-使用-选择合适的方法取决于具体的应用场景和需求

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

Vue.js 非父子组件通信方法详解

一、使用Vuex

Vuex 是一个专门为 Vue.js 应用设计的状态管理模式，可以集中管理应用的所有组件的共享状态。

安装 Vuex

```javascript npm install vuex --save ```

创建 Vuex Store

```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } } }); ```

在 Vue 实例中引入 Store

```javascript new Vue({ el: 'app', store, ... }); ```

在组件中使用 Store

```javascript methods: { increment() { this.$store.commit('increment'); } } ```

组件 A 中更新数据：

```javascript methods: { updateData() { this.$store.commit('increment'); } } ```

组件 B 中读取数据：

```javascript computed: { count() { return this.$store.state.count; } } ```

二、使用EventBus

EventBus 是一个中央事件总线，可以在不相关的组件之间传递信息。

创建 EventBus

```javascript const EventBus = new Vue(); ```

在组件中使用 EventBus

```javascript methods: { sendData() { EventBus.$emit('data-event', 'some data'); } } ```

组件 A 中触发事件：

```javascript methods: { sendData() { EventBus.$emit('data-event', 'some data'); } } ```

组件 B 中监听事件：

```javascript created() { EventBus.$on('data-event', (data) => { console.log(data); }); } ```

三、使用Provide/Inject

Provide/Inject 是 Vue.js 2.2.0 新增的 API，可以在祖先和后代组件之间共享数据。

祖先组件中提供数据

```javascript provide() { return { data: 'some data' }; } ```

后代组件中注入数据

```javascript inject: ['data'], computed: { sharedData() { return this.data; } } ```

四、使用本地存储或全局变量

本地存储或全局变量也是一种常见的方法，通过浏览器的 localStorage 或者全局变量来实现数据共享。

使用本地存储

```javascript methods: { storeData() { localStorage.setItem('data', 'some data'); }, readData() { return localStorage.getItem('data'); } } ```

组件 A 中存储数据：

```javascript methods: { storeData() { localStorage.setItem('data', 'some data'); } } ```

组件 B 中读取数据：

```javascript methods: { readData() { return localStorage.getItem('data'); } } ```

使用全局变量

```javascript // 定义全局变量 const globalData = 'some data'; // 组件中使用全局变量 methods: { getData() { return globalData; } } ``` Vue.js 提供了多种方式来解决非父子组件之间的通信问题，包括使用 Vuex、EventBus、Provide/Inject 以及本地存储或全局变量。选择合适的方法取决于具体的应用场景和需求。

问题	答案
什么是非父子组件通信？	在Vue中，非父子组件通信是指在没有直接父子关系的组件之间进行数据传递和通信。
使用Event Bus实现非父子组件通信的步骤是什么？	1. 创建一个Event Bus；2. 在发送组件中发送事件；3. 在接收组件中监听事件。
Vuex如何实现非父子组件通信？	1. 安装和配置Vuex；2. 在发送组件中派发一个Action；3. 在接收组件中获取状态。