mesqueeb
3 years ago
3220
20
Vue

How to catch a child's $emit in the parent with Vue?

Posted 3 years ago by mesqueeb

I have a Vue component with a child component that creates a confirmation message box.

I would capture e.g. the cancel button on the confirmation child component like this:

// This is part of my child component's HTML template:
<a href="" @click="popoutCall('cancel', popout)">Cancel</a>

Then I'd emit the event like this:

// This is a method in my child component:
popoutCall(msg, popout){
        this.$emit(msg, popout.item.id);
},

Now I want to catch this event on in my main Vue instance, knowing that the confirmation box for the item with a certain ID was 'cancelled'. How do I catch this event on the Vue parent and do something like console.logging this ID that was emitted with the event?

Or if anyone has any advice on how to best create a confirmation dialogue and handling the chosen option, let me know!

Please sign in or create an account to participate in this conversation.