Vue Emit With Parameter

Posted on  by admin

Modified1 year, 5 months ago. I am working on a modal component using VueJS 2.

Right now, it basically works -- I click on a button and the modal opens, etc. What I want to do now is create a unique name for the modal and associate the button with that particular button.

This is what I have in mind. The modal has a unique name property:. And this would be the associate button:.

More Vue Tutorials

What I need to figure out is how to pass the parameter of showModal to the modal component.

  • Here is the method that I'm using in the root vue instance (i.e, NOT inside my modal component):.

  • What I want to do is to access the name property in the component -- something like this:.

But this shows up as undefined. So what am I doing wrong? How can I access the name property inside the modal component?

NOTE: If you are wondering what this.bus.$on is, please see the following answer to a previous question that I asked: https://stackoverflow.com/a/42983494/7477670.

  • 8484 bronze badges. 4,24777 gold badges3939 silver badges8787 bronze badges.

  • 3939 silver badges8787 bronze badges.

  • Pass it as a parameter to $emit. Also, if you want to give the modal a name, you need to accept it as a prop in the modal component.

Then I assume you will want to do something like, . 1414 gold badges188188 silver badges158158 bronze badges. 158158 bronze badges.

2. Catch the event in a parent component

You could emit your event all the way back up the chain (although this can start to get quite messy if you're having to emit any further than grandchild to grandparent).

Event modifiers

You could use a dedicated state management system such as Vuex, which can help to simplify the process of emitting from deeply nested components. I'd certainly recommend this route and we'll be definitely look to cover this in a future post!

Or you could use something known as a Global Event Bus. You can think of this as implementing your own simplified version of a state management system such as Vuex.

A more advanced example of using custom events in Vue is covered in the second part of my Vue Quiz App Tutorial

However, it is worth noting that Vue's core team generally advises against the use of Global Event Buses in favor of something more robust, such as Vuex.

We won't go into the reasons for this any further here, but it's certainly worth researching further if this is something you are considering in your app. this.$emit dispatches an event to its parent component.

MyInput.vue

this.$parent gives you a reference to the parent component. this.$root gives you a reference to the root component.

this.$parent.$emit will make the parent dispatch the event to its parent.

Why $emit()?

this.$root.$emit will make the root dispatch the event to itself. I am trying to emit event from my component with corresponding parameters, but I can’t find a way to send the parameters.

Here is the code so far:. I am catching the event, but I am not getting entered params.

What am I doing wrong here? That is the first part of the problem I am trying to solve. The second part is following:. When clicked on the visible-filter component, I want to remove the class (this part is done), append the class to the rest of the elements, and when the mouseenter/mouseout event is fired, the clicked element shouldn’t be affected.How can I achieve this?

Vue components have a $emit() function that allows you to pass custom events up the component tree. All Vue instances have a $emit() function, including both top-level apps andindividual components.

MyInput.vue

Generally, you use $emit() to notify the parent component that something changed.

Passing data up to the parent component - with custom events

For example, suppose you have a component input-name that takes a prop called name.

This component exposes an input form asking the user for their name, and an 'Update' button that updates the name. The way to do this is for input-name to $emit() an event called 'update' when the user clicks the 'Update' button, with the new name.

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase.

This practical guide provides code snippets about custom events in Vue which can be used to pass data up the component tree.

  • For regular DOM events like click please refer to the Vue Docs.

  • Now, data always flow down the component tree in Vue or other frontend frameworks - with props.

But, how to pass data up without using global state like Vuex? Using custom events allows us to pass data up the component tree, or notify the parent component that a custom event has happened - if no data is being passed.

MyInput.vue

But what if we need to notify a parent component that some event has been triggered in a child or even pass data upwards?

More Ressources

1. Trigger the event with a custom condition

The answer is emitting custom events in Vue. We need to take care of these steps to emit events in Vue:.

Think about the trigger for the event: a condition in a method, computed property or watcher in child component from where the event is emitted.

Emit the event with this.$emit("my-custom-event", \[data\]) when the condition is met. Catch the event bubbling up to a parent component. Event naming convention: Custom event names should be in kebab-case like in my-custom-event.

MyInput.vue

Use kebab-case when listening to events

In addition, it is not recommended to use capital letters like in PascalCase or camelCase since HTML event handlers are case-insensitive.

For this step it is essential to define in which case the event should be emitted. We need to define a condition inside a computed property, a method or a watcher in order to get there.

Suppose we're having a form and want to pass the input value up to the parent when the form is being submitted.

Let's dive right into the example code:. In this example ChildComponent we're defining the condiction when the event shall be emitted: When the form is being submitted. Our event handler is a method onSubmit(). It is very common to include form validation inside event handlers for submitting forms.

Final Thoughts

A minimal example of form validation in this case is shown next:. In the example above we're making use of the regular submit event and a custom event we called form-submitted.

It is important to differentiate, here. click and submit are the most common regular DOM events.

  • The v-on-directive provides several event modifiers in case you want to call event.preventDefault() or event.stopPropagation().

  • Here are quick examples for event modifiers on click or submit events in Vue:.

  • If you want to know more about event modifiers check out the Vue Docs.

Now, inside the parent component we need to catch the emitted event and setup a handler method there.

Inside our handleFormData method we are simply putting the form data passed from the child component in the local state of the parent component.