【问题标题】：Vuejs - bubbling custom eventsVuejs - 冒泡自定义事件
【发布时间】：2017-02-02 03:00:09
【问题描述】：

在组件中使用组件时，有没有办法让事件冒泡？

我的应用程序是一个动态菜单。动态菜单是一个组件 (dyn-menu)，它为每个 <li> 元素使用一个本地组件 (menu-item)。每个<menu-item> 都有一个与之关联的单击处理程序，该处理程序发出一个自定义事件（在完整实现中具有菜单项的ID）。但是应用程序看不到<menu-item> 发出的事件，因为它们没有冒泡。

有没有办法允许<dyn-menu> 组件本地的<menu-item> 组件发出事件并仍然允许vapp 查看和处理事件？

我对 Vuejs 很陌生，所以我可能会遗漏一些明显的东西。我可能试图通过使用两个组件来解决这个问题，但这不是处理它的最佳方法。有没有更好的方法来解决它？

这是jsfiddle。您必须删除<dyn-menu> 模板中的@dyn-menu-item-click='itemClick' 行，以说明如果组件不处理事件，事件不会冒泡。如果删除该行，则<dyn-menu> 不会处理该事件，但vapp 也不会看到该事件。

【问题讨论】：

你能再解释一下吗，你的 js-fiddle 似乎把事件冒泡了。
是的，我手动将事件冒泡。我想知道是否有办法让事件自然冒泡，例如，<menu-item> 可以发出事件，应用程序捕获它，但无需在<dyn-menu> 组件中手动传播事件。（如果您删除模板中的行 `@dyn-menu-item-click='itemClick' 则事件不会传播，也不会冒泡。）
将先前的评论纳入问题。
我也可以用这个。我确实发现你可以像这样冒泡事件：<log-out-button v-on:logged-out="$emit('logged-out')"></log-out-button>
我认为冒泡不会成为 Vue 自定义事件的功能，因为它们是自定义的。根据其定义，冒泡发生在 DOM 事件中。由于自定义事件取决于实现者，因此您可以将代码放入气泡中。 @robbeclerckx 的评论可以帮到你。 @mycustomevent="$emit('mycustomevent')"

标签： javascript event-handling vue.js

【解决方案1】：

我知道有 4 个选项

像你一样重新发送事件
在子组件上使用this.$parent（重复地）访问所需的父组件并发出事件。（请参阅下面的“实现自己的冒泡事件插件”）
使用事件总线，父级为provided，子级为injected。
使用 Vuex 存储并将事件推送到子组件中的事件队列。在应用程序的其他位置，观察反应式事件队列中的新元素或将其绑定到某个东西。

实现自己的冒泡事件插件

这很简单。该插件添加了一个新的$bubble 方法，该方法向其父级发出冒泡事件。我考虑过发布一个插件来做到这一点，但它是如此简单，以至于开销不值得。

// Add this as a Vue plugin
Vue.use((Vue) => {
  Vue.prototype.$bubble = function $bubble(eventName, ...args) {
    // Emit the event on all parent components
    let component = this;
    do {
      component.$emit(eventName, ...args);
      component = component.$parent;
    } while (component);
  };
});

// Some nested components as an example

// note usage of "$bubble" instead of "$emit"
Vue.component('component-c', {
  template: `
    <button type="button" @click="$bubble('my-event', 'payload')">
      Emit bubbling event
    </button>`,
});

Vue.component('component-b', {
  template: `<component-c @my-event="onMyEvent" />`,
  
  methods: {
    onMyEvent(...args) {
      console.log('component-b listener: ', ...args);
    },
  },
});

Vue.component('component-a', {
  template: `<component-b @my-event="onMyEvent" />`,
  
  methods: {
    onMyEvent(...args) {
      console.log('component-a listener: ', ...args);
    },
  },
});

var vapp = new Vue({
  el: '#app',

  methods: {
    onMyEvent(...args) {
      console.log('root listener: ', ...args);
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <component-a @my-event="onMyEvent" />
</div>

事件总线

事件总线如下所示：

Vue.component('dyn-menu', {
  components: {
    'menu-item': {
      template: '<li @click="itemClick">{{item.text}}</li>',
      props: ['item'],
      inject: ['eventBus'], // <-- Inject in the child
      methods: {
        itemClick() {
          // Emit the event on the event bus
          this.eventBus.$emit('dyn-menu-item-click', ['menu-item dyn-menu-item-click']);
        }
      }
    }
  },

  // ...
});

var vapp = new Vue({
  el: '#app',
  data: {
    // ...
    eventBus: new Vue(),
  },
  provide() {
    return {
      // The parent component provides the event bus to its children
      eventBus: this.eventBus,
    };
  },

  created() {
    // Listen to events on the event bus
    this.eventBus.$on('dyn-menu-item-click', this.menuClick);
  },
  methods: {
    menuClick(message) {}
  }
})

工作示例：https://jsfiddle.net/7vwfx52b/

这里列出了很多事件总线插件：https://github.com/vuejs/awesome-vue#custom-events

【讨论】：

我猜你已经回答了这个问题。这是“不”，没有办法按照我的要求去做。不错的选择范围。
它本身不是内置的，但可以通过几行代码将其固定到您的应用程序中。我添加了另一个示例。

【解决方案2】：

从 Vue 2.4 开始，组件可以通过 $listeners 属性访问其父级的侦听器。您可以通过将属性v-on="$listeners" 添加到这些子元素的标签来设置组件以将其父级侦听器传递给特定子级。请参阅https://vuejs.org/v2/api/#vm-listeners 上的文档。

您还可以使用以下属性转发特定事件：@dyn-menu-item-click=$listeners['dyn-menu-item-click']。

这仍然不是真正的冒泡，而是一种不太冗长的重新发出事件的方式。

【讨论】：