如何使用 Vue js 2 在组件子组件链上冒泡事件？

Question

我的 vue 应用程序正在使用：

component-child 组成的component-parent组件

在父组件内部我有按钮，当有人单击按钮时我想发出一个事件以便由 vue 处理并传递给另一个组件

到目前为止我做了什么：

var vm = new Vue({
    el: '#app',
    methods: {
        itemSelectedListener: function(item){
            console.log('itemSelectedListener', item);
        }
    }
});

Vue.component('component-child', {
    template: ' <span  v-on:click="chooseItem(pty )" >Button  </span>',
    methods: {
        chooseItem: function(pty){
            console.log(pty);
            this.$emit('itemSelected', {
                'priority' : pty
            });
        }
    }
});

Vue.component('component-parent', {
    template: '<component-child  v-for="q in items" ></component-child>'
});

HTML：

<component-parent v-on:itemSelected="itemSelectedListener"  ></component-parent>

它到达了我的console.log(pty); 行，但似乎this.$emit('itemSelected' 无法通过：

console.log('itemSelectedListener', item); // this is not going to be called...

提示？

我应该从 child->parent->Vue-instance 冒泡事件吗？ （我也试过了，但没有成功）

Answer 1

您可以使用浏览器的事件 API。它需要比 Vue 的内置内容更多的脚本，但它也可以解决这些冒泡问题（并且与创建“总线”的代码量大致相同，如已接受的答案）。

在子组件上：

this.$el.dispatchEvent(new CustomEvent('itemSelected', { detail: { 'priority' : pty }, bubbles: true, composed: true });

在父组件上，在mounted生命周期部分：

mounted() {
    this.$el.addEventListener('itemSelected', e => console.log('itemSelectedListener', e.detail));
}

Answer 2

component-parent 模板存在一个问题，因为它试图呈现多个子组件。 Vue 通常需要在组件中使用单个根 div，因此您需要将其包装在 div 或其他标签中。

<div>
    <component-child  v-for="q in items"></component-child>
</div>

要指出的第二件事是，您从低 2 层的子组件发出一个事件，并在根目录中监听它。

Root //but you listen to the event up here 1 level above
 Component 1 //you should listen to the event here
  Component 2 //your try to emit it from here

这里有 2 个选项。从component-child 发出，在component-parent 中监听该事件，然后向上传播该事件。小提琴https://jsfiddle.net/bjqwh74t/29/

第二个选项是注册一个名为bus 的全局变量，它是一个空的 vue 实例，当您希望在非子父组件之间进行通信时，您可以将其用于这种情况。小提琴https://jsfiddle.net/bjqwh74t/30/

通常在父组件和子组件之间，您通过从子组件发出并使用v-on:event-name="handler" 在父组件中侦听来直接使用事件，但对于组件之间有更多级别的情况，您使用第二种方法。

第一个案例的文档链接：https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

第二种情况的文档链接：https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

PS：更喜欢使用 kebab-case 作为事件名称，这意味着您使用 - 而不是大写字母。用大写字母书写可能会导致奇怪的情况，即您的事件没有被捕获。

Answer 3

我有点惊讶没有人建议使用事件总线组件。在高度解耦的系统中，有一个共享的事件总线，然后使用它来将多个断开连接的组件链接在一起发布/订阅样式是一种相当常见的模式。

//eventbus.js
import Vue from 'vue'

export const EventBus = new Vue()

一旦有了，就可以轻松地从任何地方发布活动

// component1.js
import { EventBus } from '@/services/eventbus'
...
EventBus.$emit('do-the-things')

并从其他地方聆听他们的声音。

// component2.js
import { EventBus } from '@/services/eventbus'
...
EventBus.$on('do-the-things', this.doAllTheThings)

请注意，这两个组件对彼此一无所知，它们并不真正需要关心事件是如何或为何引发的。

这种方法有一些潜在的不良副作用。事件名称确实需要是全局唯一的，这样您就不会混淆您的应用程序。除非您执行更复杂的操作，否则您还可能通过单个对象引导每个事件。您可以对自己的应用源进行成本/收益分析，看看它是否适合您。

Answer 4

为冒泡创建一个custome directive，并在子组件中使用它。

示例指令：

// Add this to main.ts when initializing Vue
Vue.directive('bubble', {
  bind(el, { arg }, {context, componentInstance}) {
    if (!componentInstance || !context || !arg) {
      return;
    }

    // bubble the event to the parent
    componentInstance.$on(v, context.$emit.bind(context, arg));
  }
});

子组件可以使用该指令通过父组件发出（我切换到 kabob 案例和事件的简写）。

<!-- template for component-parent -->
<component-child v-bubble:item-selected  v-for="q in items"></component-child>

<!-- usage of component-parent -->
<component-parent @:item-selected="itemSelectedListener"></component-parent>

包括下面我的完整绑定指令。它允许冒泡多个事件。

<!--------------------
 * A few examples 
--------------------->
<!-- bubble single event -->
<child v-bubble:click/>
<child v-bubble:_.click/>
<child v-bubble="'click'"/>
<child v-bubble:any-costume-event-will-work/>

<!-- bubble: click, focus, blur -->
<child v-bubble:_.click.focus.blur/> 
<child v-bubble="'click, focus, blur'"/>

<!-- prefixed bubbling: click, focus, blur as child-click, child-focus, child-blur -->
<child v-bubble:child.click.focus.blur/> 
<child v-bubble:child="'click, focus, blur'"/>

Vue.directive('bubble', {
        bind(el, { value, arg: prefix = '', modifiers }, {context, componentInstance}) {
  const events = value && value.trim() ? value.split(',') : Object.keys(modifiers);
    if (!events.length && prefix) {
      events.push(prefix);
      prefix = '';
    } else if(prefix) {
      prefix = prefix === '_' ? '' : prefix += '-';
    }

    if (!componentInstance || !context || !events.length) {
      return;
    }

    events.forEach((v: string) => {
      v = v.trim();
      const eventName = `${prefix}${v}`;
      const bubble = context.$emit.bind(context, eventName);
      componentInstance.$on(v, bubble);
    });
  }
});

Answer 5

在您的子组件中，只需使用$emit 将事件发送到$root，如下所示：

v-on:click="$root.$emit('hamburger-click')"

然后，在您的父组件（例如：“App”）中，在 Vue mounted 生命周期钩子中设置监听器，如下所示：

  export default {
    <snip...>
    mounted: function() {
      this.$root.$on('hamburger-click', function() {
        console.log(`Hamburger clicked!`);
      });
    }
  }

Answer 6

这有点晚了，但我是这样做的：

子组件：

this.$root.$emit('foobar',{...});

父组件：

this.$root.$on('foobar')