How do I pass an event to two parents up?

Greetings to all!

Faced with the problem of passing user events to the child element. I want to pass it through the attributes method, but it refuses to digest it

If you shove events directly into the template, the button also refuses to work

Welcome to the Vue Forum, @Flareon!

Your BaseButton isn’t emitting the click up to its parent. Try this:

// Basebutton.vue
    <button @click="$emit('click', $event)">

Perhaps a better way is to automatically pass ALL events back up to the parent:

// Basebutton.vue
    <button v-on="$listeners">
1 Like

You can emit it to Root and listen to the event in the parent example in child you use this.$root.$emit(‘eventName’) and in parent this.$root.$on(‘eventName’)

or you can use the boring way by emiting like this in child this.$parent.$parent.$emit(‘eventName’)

or you can first emit the value to your first parent and again emit the value from the first parent to its above parent like in child this.$emit(‘eventName’,value) and in parent1 you do this.$on(‘eventName’,functio(val){
}) and recieve it iin parent2 like this this.$on(‘eventName1’,function(val1){
console.log('recieved value is: ',val1)

You can use a simple event.bus and pass the event

Read this:

But depending on your use perhaps using Vuex… all depends.

make a simple event bus…

import Vue from 'vue'
export const EventBus = new Vue()

and in component

this.$bus.on(do something)

Thank you!

I was really worried about the fact that when issuing a click on a button and passing it to TodoListItem, and then to TodoList, two click events occurred in the debugger.

  1. Click on the button
  2. By element

However, your third method allowed only one event to be triggered. It’s wonderful!

I’m going to read more about $listeners. And I’m sorry for my English.

No worries…

Not 100% sure so you might need to find out but you can use a hook like beforeDestroy() or what ever to destroy the listener


As far as I know, event bus is discouraged.

There’s another alternative, in case of nested components, which doesn’t need event emision passthrough nor an event bus: to provide a method from the grandparent and inject it to the grandchild. The grandchild will have access to this method in which data from the grandparent will be modified.

Two things to consider:

  • The data should be inherent to the component. If it’s app state, it should be managed via Vuex/Pinia
  • provide must accept a function which returns the provided methods (from the grandparent) as properties

This is an example I made. I use a counter, which in reality is app state and in real world should be managed by Vuex, but imagine it represented something related to components instead, such as a flag to open/close a slide: