实现自己的冒泡事件插件

Question

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

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

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

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

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

Answer 1

我知道有4种选择

像您一样重新发送事件
在子组件上重复使用this.$parent来访问所需的父组件并发出事件。（请参见下面的“实现您自己的冒泡事件插件”）
使用由父母provide和孩子inject组成的事件总线。
使用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

Answer 2

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

您还可以转发具有@dyn-menu-item-click=$listeners['dyn-menu-item-click']这样的属性的特定事件。

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

Vuejs - 冒泡的自定义活动

2 个答案:

实现自己的冒泡事件插件

事件总线