代码之家 › 专栏 › 技术社区 › Stefan Stoychev

在Vue中将事件从嵌套的子级传递到父级

vuex vue-component vuejs2

Stefan Stoychev · 技术社区 · 6 年前

我正在开发一个Vue组件,该组件将在不同的项目中重复使用(并将通过 npm install ... )主要问题是如何处理事件发出。

组件本身包含一些嵌套的子元素,如:

component-parent
  |-child 1
  |-child 2
      |-child 3
         |-child 4

当组件包含在某个项目中时, component-parent 将公开从整个组件发出的所有事件。正在徘徊,组件中的事件是如何传递给 组件父级 . 例如,如果我想从 child 4 到 组件父级 然后 儿童4 发射到 child 3 发射到 child 2 最后发出 组件父级 .

这样的工作流程工作得很好,但看起来不太实用。

我发现了 EventBus 可以使用,而且似乎更优雅的解决方案,但也似乎不是很受欢迎。是 事件总线 是否可以自由使用或被认为是一种有点笨拙/变通的方式?

关于使用的另一个问题 vuex . 如果 武克斯 是否包含在组件本身中?是否可以从组件中发出到项目组件(包括我的组件)?包括 武克斯 在我的组件中,主要项目将有两个 武克斯 实例。有没有这样的多个商店的拦截器?

1 回复 | 直到 6 年前

Stefan Stoychev 6 年前

经过一些测试,我决定 EventBus . 事件总线 允许在组件之间发送/接收事件。组件可以是同一父树的一部分,也可以是完全不同的父树上的一部分。更多信息 here

但一般来说 event-bus.js 应创建文件

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

然后导入到将使用 事件总线 机制

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';
...

然后从发送组件发出事件

EventBus.$emit('i-got-clicked', this.clickCount);

已加载的任何组件 事件总线 可以收听这样的事件:

EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

要停止侦听事件:

EventBus.$off('i-got-clicked');

我个人发现 事件总线 非常简单和有用,但我可能只在开发将包含在其他项目中的组件时使用它们。对于相同的项目组件 Vuex 已经足够了

推荐文章

Goose · 如何更新Vue中的插槽。JS公司

7 年前

Scap · 访问其他组件中的vue组件数据时出现问题

7 年前

Andy · 从列表中删除vue组件始终删除列表中的最后一个元素

7 年前

Harshal Patil · 如何创建Vue。js插槽编程?

7 年前

kindisch · 无法解析动态导入的vue组件

7 年前

user1436631 · vueJS-当本地副本更新时,属性正在发生变化

7 年前

Willing Master · 如何配置选项以删除vue-tables-2中分页的第一个和最后一个按钮

7 年前

kshep92 · 将布尔属性传递给Vue组件的速记

7 年前

Bitwise · 将动态数据传递到路由器链路。

7 年前

user3699711 · 如何将数组中的元素添加到div元素中,其中id等于vue中的数组元素dealState号。js公司

7 年前