vue非父子如何通信

1、使用Vuex；2、使用EventBus；3、使用Provide/Inject；4、使用本地存储或全局变量。 Vue.js 提供了多种方式来解决非父子组件之间的通信问题。Vuex 是一个专门为 Vue.js 应用设计的状态管理模式，可以集中管理应用的所有组件的共享状态。EventBus 是一个简单的事件中心，可以在不相关的组件之间传递信息。Provide/Inject 是 Vue.js 2.2.0 新增的 API，可以在祖先和后代组件之间共享数据。本地存储或全局变量也是一种常见的方法，通过浏览器的 localStorage 或者全局变量来实现数据共享。

一、使用Vuex

Vuex 是一个专门为 Vue.js 应用设计的状态管理模式。在 Vuex 中，所有的组件状态都集中在一个全局的 store 中进行管理。使用 Vuex 可以非常方便地在任意组件之间共享状态。

安装 Vuex
```
npm install vuex --save
```

创建 Vuex Store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    sharedData: ''
  },
  mutations: {
    setSharedData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    updateSharedData({ commit }, payload) {
      commit('setSharedData', payload);
    }
  },
  getters: {
    getSharedData: state => state.sharedData
  }
});
export default store;

在 Vue 实例中引入 Store

import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

在组件中使用 Store

组件 A 中更新数据：

this.$store.dispatch('updateSharedData', 'New Data');

组件 B 中读取数据：

computed: {
  sharedData() {
    return this.$store.getters.getSharedData;
  }
}

二、使用EventBus

EventBus 是一个中央事件总线，通过它可以在不相关的组件之间传递信息。可以使用一个空的 Vue 实例作为 EventBus。

创建 EventBus

import Vue from 'vue';
export const EventBus = new Vue();

在组件中使用 EventBus

组件 A 中触发事件：

EventBus.$emit('updateData', 'New Data');

组件 B 中监听事件：

created() {
  EventBus.$on('updateData', (data) => {
    this.sharedData = data;
  });
},
data() {
  return {
    sharedData: ''
  };
}

三、使用Provide/Inject

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

祖先组件中提供数据

export default {
  provide: {
    sharedData: 'Shared Data'
  }
};

后代组件中注入数据

export default {
  inject: ['sharedData'],
  created() {
    console.log(this.sharedData); // 'Shared Data'
  }
};

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

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

使用本地存储

组件 A 中存储数据：

localStorage.setItem('sharedData', 'New Data');

组件 B 中读取数据：

created() {
  this.sharedData = localStorage.getItem('sharedData');
},
data() {
  return {
    sharedData: ''
  };
}

使用全局变量

定义全局变量：
```
window.sharedData = 'Shared Data';
```

组件中使用全局变量：

created() {
  this.sharedData = window.sharedData;
},
data() {
  return {
    sharedData: ''
  };
}

总结来说，Vue.js 提供了多种方式来解决非父子组件之间的通信问题，包括使用 Vuex、EventBus、Provide/Inject 以及本地存储或全局变量。选择合适的方法取决于具体的应用场景和需求。对于大型应用，推荐使用 Vuex 进行集中状态管理；对于简单的事件传递，可以使用 EventBus；对于组件层级较深的场景，可以使用 Provide/Inject；而本地存储或全局变量则适用于需要跨页面或持久化存储的情况。

为了更好地理解和应用这些方法，建议根据实际项目进行实战演练，选择最合适的通信方式，从而提升开发效率和代码可维护性。

相关问答FAQs：

1. 什么是非父子组件通信？

在Vue中，组件之间的通信是非常常见的需求。父子组件通信是比较直接的，但是当组件之间没有直接的父子关系时，我们就需要使用非父子组件通信。非父子组件通信是指在没有直接父子关系的组件之间进行数据传递和通信。

2. 使用Event Bus实现非父子组件通信的步骤是什么？

使用Event Bus是一种常见的实现非父子组件通信的方法，下面是实现步骤：

步骤一：创建一个Event Bus

在Vue中，我们可以通过创建一个Vue实例作为Event Bus来实现非父子组件之间的通信。可以在main.js文件中创建一个Event Bus实例，并将其挂载到Vue原型上，以便在全局范围内使用。

// main.js

import Vue from 'vue'

Vue.prototype.$eventBus = new Vue()

步骤二：在发送组件中发送事件

在发送组件中，可以使用$emit方法触发一个自定义事件，并传递需要传递的数据。

// Sender.vue

methods: {
  sendData() {
    this.$eventBus.$emit('custom-event', data)
  }
}

步骤三：在接收组件中监听事件

在接收组件中，可以使用$on方法监听自定义事件，并处理传递过来的数据。

// Receiver.vue

mounted() {
  this.$eventBus.$on('custom-event', (data) => {
    // 处理接收到的数据
  })
}

3. Vuex如何实现非父子组件通信？

除了使用Event Bus，Vue还提供了一个专门用于状态管理的库叫做Vuex，通过Vuex可以更方便地实现非父子组件之间的通信。

步骤一：安装和配置Vuex

首先，需要安装Vuex，并在Vue项目的入口文件中进行配置。

// main.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 配置Vuex的各个模块
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

步骤二：在发送组件中派发一个Action

在发送组件中，可以通过dispatch方法派发一个Action，并传递需要传递的数据。

// Sender.vue

methods: {
  sendData() {
    this.$store.dispatch('actionName', data)
  }
}

步骤三：在接收组件中获取状态

在接收组件中，可以使用mapState辅助函数或者this.$store.state来获取Vuex中的状态，并处理传递过来的数据。

// Receiver.vue

computed: {
  ...mapState(['stateName'])
},

mounted() {
  // 处理接收到的数据
}

以上是使用Event Bus和Vuex两种方法实现Vue非父子组件通信的介绍，根据实际需求选择合适的方法来实现非父子组件之间的通信。

文章标题：vue非父子如何通信，发布者：不及物动词，转载请注明出处：https://worktile.com/kb/p/3621953