首页  > 前端开发 > vue非父子组件通讯, 事情总线（Event Bus）

vue非父子组件通讯, 事情总线（Event Bus）

前端开发 2024-12-24 3

在Vue中，非父子组件之间的通讯能够经过以下几种办法完成：

1. 事情总线（Event Bus）： 运用一个空的Vue实例作为中心事情总线（Event Bus），在组件中经过触发事情和监听事情来完成通讯。 ```javascript // eventbus.js import Vue from 'vue'; export const EventBus = new Vue;

// 在一个组件中触发事情 EventBus.$emit;

// 在另一个组件中监听事情 EventBus.$on { // 处理数据 }qwe2; ```

2. Vuex： 假如你的项目运用了Vuex，能够经过Vuex的状况办理来完成组件间的通讯。Vuex适合于大型运用，能够有效地办理状况，而且能够追寻每个状况的改动。

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

Vue.use;

export default new Vuex.Store { state.数据 = 新数据; } }, actions: { 更新数据 { commit; } } }qwe2;

// 在一个组件中更新状况 this.$store.dispatch;

// 在另一个组件中获取状况 this.$store.state.数据; ```

3. 供给/注入（Provide/Inject）： 假如你正在构建高阶组件库，`provide` 和 `inject` 十分有用。这关于跨组件层次传递数据十分有用，特别是当子组件在组件树中嵌套很深时。

```javascript // 先人组件 export default { provide { return { 数据: '一些数据' }; } };

// 子孙组件 export default { inject: , mounted { console.log; // '一些数据' } }; ```

4. 运用大局状况办理库： 除了Vuex，还有其他大局状况办理库如MobX、Recoil等，它们也能够用于在非父子组件间同享状况。

5. 经过props和$emit组合： 假如非父子组件之间有一起的父组件，能够经过一起的父组件传递props，并运用$emit触发事情来完成通讯。

```javascript // 一起的父组件 export default { components: { 组件A, 组件B }, data { return { 数据: '初始值' }; }, methods: { 更新数据 { this.数据 = 新数据; } } };

// 组件A export default { props: , methods: { 改动数据 { this.$emit; } } };

// 组件B export default { props: , mounted { this.$emit; } }; ```

挑选哪种办法取决于你的具体需求和项目的规划。关于小型项目，事情总线或许就足够了；而关于大型运用，Vuex或其他大局状况办理库或许是更好的挑选。

Vue非父子组件通讯详解

在Vue.js结构中，组件之间的通讯是构建杂乱运用的要害。除了父子组件之间的通讯，非父子组件之间的通讯也是开发者需求把握的技能。本文将具体介绍Vue中非父子组件通讯的几种办法，协助开发者更好地了解和运用这些技能。

在Vue中，组件之间的通讯主要有以下几种办法：

1. 父传子（Props）

2. 子传父（Emit）

3. 非父子组件通讯

本文将要点讨论第三种办法，即非父子组件通讯。

事情总线（Event Bus）

事情总线是一种简略且常用的非父子组件通讯办法。它经过创立一个空的Vue实例作为中心事情总线，使得一切组件都能够经过这个实例来监听和触发事情。

完成过程

1. 创立一个事情总线实例：

```javascript

import Vue from 'vue';

export const EventBus = new Vue();

2. 在需求监听事情的组件中，运用`$on`办法来监听事情：

```javascript

EventBus.$on('eventName', (data) => {

// 处理事情

3. 在需求触发事情的组件中，运用`$emit`办法来触发事情：

```javascript

EventBus.$emit('eventName', data);

注意事项

- 事情总线适用于小型项目或组件数量较少的场景。

- 在大型项目中，运用事情总线或许会导致代码难以保护和调试。

provide


相关

Copyright © 2016-2028零基础教程 Rights Reserved. XML地图