本文介绍了Vuejs - 冒泡自定义事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

Is there a way to allow events to bubble up when using a component within a component?

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

My application is a dynamic menu. The dynamic menu is a component (dyn-menu) and it uses a local component (menu-item) for each of the <li> elements. Each <menu-item> has a click handler associated with it that emits a custom event (with an ID for menu item in the full implementation). But the application doesn't see the events issued by <menu-item> because they are not bubbled up.

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

Is there a way to allow the <menu-item> component, which is local to the <dyn-menu> component, emit the event and still allow vapp to see and handle the event?

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

I'm pretty new to Vuejs so I might be missing something obvious. And it's possible that I'm trying to solve this by using two components and that's not the best way to handle it. Is there is a better way to approach it?

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

Here's a jsfiddle. You have to remove the @dyn-menu-item-click='itemClick' line in the <dyn-menu> template to illustrate that the event doesn't bubble up if the component doesn't handle the event. If that line is removed then <dyn-menu> doesn't handle the event but vapp never sees the event either.

实现自己的冒泡事件插件

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

Implement your own bubbling event plugin

It's very simple. The plugin adds a new $bubble method that emits events that bubble to their parents. I considered publishing a plugin that does this, but it's so simple that the overhead is not worth it.

// 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

There are plenty of event bus plugins listed here: https://github.com/vuejs/awesome-vue#custom-events

这篇关于Vuejs - 冒泡自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

Vuejs - 冒泡自定义事件

问题描述

推荐答案

实现自己的冒泡事件插件

Implement your own bubbling event plugin

相关文档推荐