如何使用Vue js 2在组件子组件链上冒泡事件? [英] How to bubble events on a component subcomponent chain with Vue js 2?

问题描述

我的Vue应用程序使用:

I have my vue application using:

由component-child组成的parent-parent组件

component-parent component that is made of component-child

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

inside component-parent I have buttons, when someone click a button I want to emit an event in order to be handled by vue and passed to another component

我到目前为止所做的:

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'似乎无法通过:

It reaches my console.log(pty); line but it seems that this.$emit('itemSelected' wont get through:

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

一个提示?

我应该从child-> parent-> Vue-instance冒起事件吗?(我也尝试过，但没有成功)

should I bubble up the event from child->parent->Vue-instance? ( I also tried that but with no success)

推荐答案

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

There is one issue with your component-parent template as it tries to render multiple child components. Vue usually requires a single root div inside components therefore you need to wrap it in a div or other tag.

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

要指出的第二件事是，您从一个2级以下的子组件中发出一个事件，然后您在根目录中侦听该事件.

A second thing to point out is that you emit an event from a child component which is 2 levels down and you listen to it in the root.

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/

You have 2 options here. Either emit from component-child listen to that event in component-parent then propagate that event upwards. Fiddle https://jsfiddle.net/bjqwh74t/29/

第二种选择是注册一个全局的所谓的 bus ，它是一个空的vue实例，当您希望非子级组件之间进行通信时，可以在这种情况下使用它.小提琴 https://jsfiddle.net/bjqwh74t/30/

The second option would be to register a global so called bus which is an empty vue instance that you can use for such cases when you want communication between non child-parent components. Fiddle https://jsfiddle.net/bjqwh74t/30/

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

Usually between parent and child components you use the events directly by emitting from child and listening in parent with v-on:event-name="handler" but for cases where you have more levels between components you use the second approach.

第一种情况的文档链接:https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

Doc link for the first case: https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

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

Doc link for the second case: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

PS:对于事件名称，更喜欢使用kebab-case，这意味着您使用-而不是大写字母书写.用大写字母书写会导致奇怪的情况，即您的事件没有被发现.

PS: prefer using kebab-case for event names which means you write with - instead of capital letters. Writing with capital letters can result in weird situations where your event is not caught in the root.

这篇关于如何使用Vue js 2在组件子组件链上冒泡事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！