全栈博客园 全栈博客园全栈博客园

vue非父子组件通讯, 事情总线(Event Bus)

在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

未经允许不得转载:全栈博客园 » vue非父子组件通讯, 事情总线(Event Bus)