javascript - Is there a way to capture events emitted by multiple child components in vuejs? - Stack Overflow

admin管理员组

文章数量:1401673

I have a parent ponent which has multiple child ponents

<grid>
   <cell></cell>
   <cell></cell>
   <cell></cell>
</grid>

My cell ponents emit an event with payload saying it is being edited this.$emit('editing',cellId)

I know I can capture the event like <cell @editing="do something"></cell> or capture using EventBus.$on('editing'), I do not want to use root listener as well this.$root.$on('editing')

But because its the parent ponent, how can i listen to event of 'editing' when the parent ponent is mounted

mounted: function(){
    this.$on('editing',dosomething)
}

why am I not able to add listen when the parent ponent is mounted?

I have a parent ponent which has multiple child ponents

<grid>
   <cell></cell>
   <cell></cell>
   <cell></cell>
</grid>

My cell ponents emit an event with payload saying it is being edited this.$emit('editing',cellId)

I know I can capture the event like <cell @editing="do something"></cell> or capture using EventBus.$on('editing'), I do not want to use root listener as well this.$root.$on('editing')

But because its the parent ponent, how can i listen to event of 'editing' when the parent ponent is mounted

mounted: function(){
    this.$on('editing',dosomething)
}

why am I not able to add listen when the parent ponent is mounted?

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow asked Jul 18, 2017 at 21:12 MasadeMasade 71611 gold badge1111 silver badges2929 bronze badges 6

• 3 Your mounted function is listening for events on the parent ponent. The child ponents emit events on themselves. What is your goal, and why do you not want to do the <cell @editing="..."> form of event handling? – Roy J Commented Jul 18, 2017 at 21:35
• It's a bit unclear to me what you're aiming for. Please clarify your goal if possible. But if you want to listen for editing event in parent ponent, you can use EventBus in mounted hook: EventBus.$on('editing') – ironcladgeek Commented Jul 19, 2017 at 5:49
• I wanted to conceptually understand this and how events in child work. The best way i know is <cell @editing="..." without using eventBus or emitting to $root so what is the difference between listening in mounted and listening on ponent @editing – Masade Commented Jul 19, 2017 at 6:25
• @RoyJ - I don't think this is correct: Your mounted function is listening for events on the parent ponent. You cannot emit events to children, it happens with props instead. The mounted function actually listens for events inside the current instance. – Andrey Popov Commented Jul 19, 2017 at 10:18
• @AndreyPopov The current instance is the parent ponent. I am using "parent" to distinguish between his parent and child ponents, not between the ponent I'm talking about and its parent. – Roy J Commented Jul 19, 2017 at 10:31

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

The main difference that you are missing is described in the Custom Events section:

In addition, a parent ponent can listen to the events emitted from a child ponent using v-on directly in the template where the child ponent is used.

You cannot use $on to listen to events emitted by children. You must use v-on directly in the template, as in the example below.

What this means is that child-parent munication is done through a directive, using the v-on (or @edit) way.

Your example here

mounted: function(){
    this.$on('editing',dosomething)
}

Won't actually work. In the emit documentation it's said that:

Trigger an event on the current instance.

Which means that inside the same ponent, you can actually use this.$on and it will work. But if you want to use it in parent, then you should use the inline directive to have it bind, otherwise it won't work.

Also keep in mind that emits works only for a single step, meaning that the the parent can catch it. If you need to emit subchild -> child -> parent, then you should catch the event (using inline binding) from subchild in child, and re-emit it again so it goes to parent.

If it is outside of children-parent scope, then you should use what is called a global bus. Basically it narrows down everything to a single instance, which emits and listens for all events. So then they are no longer child-parent or whatever kind of connection, they are all on the very same instance, and therefore you can always use them in every ponent of yours.

Bottom line is - your approach to listen on mounted won't work. Hope that helps :)

The difference between listening to each child and listening to the EventBus is this:

• when you emit an event like this.$emit('event') the event will be fired only for the parent ponent.
• when you do a EventBus like EventBus.$emit('event') then your event will be sent to all the ponents

There are pros and cons for each one; EventBus can send events to ponents which will never use that event (can bee an event polution), and the parent event emitter can be not that elegant to use as EventBus.
So you decide which approach is good for you.

TL;DR Stumbled across this issue my self. Like the other said, when you want to bind an event listener from a parent, you need to use v-on because, well ... , you are binding something tot he child. So the actual callback is ran by the child, when that child detects that the event ocured.

In the child use this.$parent.$emit('event-name');
In the parent use

mounted: function() {
    this.$on('event-name', function() {console.log('test')});
}  

The above will let you trigger the event in the parent so you can use $on in the parent to lsiten to that event that was triggered by the child.

本文标签： javascriptIs there a way to capture events emitted by multiple child components in vuejsStack Overflow