Question

我正在研究一个Vue组件，该组件将在不同的项目中重复使用（并且可以通过Your total is 5获得），并且主要质疑如何处理事件发出。

该组件本身包含一些嵌套的子元素，例如：

yAxis: {
    min: 0,
        title : "",
     gridLineDashStyle: 'ShortDash',
    labels: {
    align :"left",
    x:-6,
    y:-3
    }
}

当组件包含在某个项目中时，npm install ...将公开从整个组件发出的所有事件。并且一直在徘徊组件内事件如何传递到component-parent |-child 1 |-child 2 |-child 3 |-child 4。例如，如果我想将事件从component-parent传递到component-parent，则child 4发出到component-parent，发出到child 4，最后发出到child 3 。

这种工作流程工作正常，但看起来不太实用。

我发现child 2可以使用，看起来更优雅，但似乎不太流行。 component-parent是否可以自由使用，或者被认为是有点hacky /替代方法？

关于使用EventBus的另一个问题。如果EventBus包含在组件本身中，是否有可能将其发射到项目组件（包含我的组件）？在我的组件中包含vuex将导致主项目具有两个vuex实例。拥有多个这样的商店是否有障碍物？

Answer 1

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

但是通常应该创建event-bus.js文件

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

然后导入将使用EventBus机制的任何组件

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

然后从发送组件发出事件

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

任何已加载EventBus的组件都可以侦听此类事件：

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

停止监听事件：

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

我个人觉得EventBus非常简单和有用，但是我可能只有在开发将包含在另一个项目中的组件时才使用它们。对于相同的项目组件，Vuex绰绰有余

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

1 个答案: