Vue Component Event

Posted on  by admin

In this Vue tutorial we learn how to handle events and send data from one component to another up the tree.

We cover how to define and emit events, listen for emitted events, send data and validation. How to emit an event from a child component to a parent. If you want to follow along with the examples, you will need an app generated by the Vue CLIas well as the following extra components.

The project should look similar to the following. We want to nestMainMenuinside the root App component underneath a button that shows theMainMenuwhen clicked.

InMainMenu, we’ll have a paragraph with some identifying text and a button below it. We’ll implement the closing functionality in the lesson.

Earlier in the course we learned that we can communicate from a parent component to a child component with props.

We also learned how to make data available down through a nested component tree with the Provide and Inject API's. Vue uses events to communicate from a child component to a parent component.

To emit an event from a child component up to its parent, we use a simple two-step process. Step 1: Define the event in the child component.

Step 2: Emit the defined event from the child component. We will useMainMenuas the child and the root App component as the parent.

We define an event in the child component by specifying it in an array in theemitsoption of the component we want to send the event from.

As an example, we’ll define an event inMainMenuthat will close it when a user clicks the button. To emit the event, we use the special$emitinstance method with the event name as its argument.

The event is emitted when an event like a button click is fired. To demonstrate, we’ll add the click event to ourMainMenu’s close button that will emit the event we defined in theemitsarray.

Now our event will be emitted to any components up in the hierarchy when the user clicks the button.

Events aren’t auto-captured in a parent component.

The parent has to explicitly listen for it.

To listen to an event, we bind the emitted event with event binding on the child component. As its value, we can specify any functionality that we want to execute when the event triggers.

To demonstrate, we’ll listen for thecloseMenuevent in our root App component on theMainMenuinstance.

To keep things simple, we’ll use an inline expression that closes the menu. If we run the example in the browser, the menu closes when we click theClose Menubutton.

When we click the button, it fires the$emitand sends thecloseMenuevent to the root App component. The root App component is listening for thecloseMenuevent and once it receives it, executes the code that setsisMenuOpento false.

We can send data from the child up to the parent by specifying that data as the second argument in$emit.

To receive the data in the parent component, we have to create a method.

The method automatically receives the data as a parameter. To demonstrate, we’ll send the name “John Doe” with thecloseMenuevent.

In the root App component, we’ll move the logic that closes the menu to acloseMenumethod.

We’ll also capture the data that was emitted and store it in a data property that we can output in the template. When we click on theClose Menubutton in the browser, the event will emit, send the data and be stored in thenamedata property that shows underneath the button.

noteThis is not the only way to send data from a child to a parent.

We can also use Slot Props, which we cover in the Slots lesson.

Similar to validating props passed from a parent component, it is possible to validate custom events that are emitted from the child component.

In the previous example we sent a hardcoded name through the emitted event when the user clicks on theClose Menubutton. Let’s adjust our example and add a text input field that takes the name value from the user withv-model.

If we open the menu, enter a name and close the menu again, the name we entered will show below the button.

So everything works as expected. Now let’s add a validation when emitting this event. We’ll start by changing theemitsoption from an array to an object. Vue expects the key to be the custom event name, and the value to be the validation function.

We’ll use the ES6 shorthand syntax and define the key as a function. This function receives the argument we specified when emitting the event, in this case thenamedata property.

If this function returns false, Vue will display a validation warning in the console. So in the function body we can do a simple check to see if the input, and thus thename, is empty. If we go to the browser and close the menu without entering a name, Vue will raise the following warning in the console.

Even though the validation only provides a warning in the console, it’s useful when you’re working in a team and developing components that will be used by other developers. We’ll often create form components to be used throughout the application.

For example, we may want to style a text input component and use it throughout the application for all text inputs, like a search bar or inputs in a contact form. But the problem is that thev-modeldirective doesn’t know how to behave with a custom component.

So we will need to add some logic to ensure it works.

How to validate an emitted event

  • Introduction to Event Handling in Vue.js

    Vue.js is an easy to use web app framework that we can use to develop…

  • Pass the Event Object and Other Arguments to v-on in Vue.js

    We can pass arguments to event handlers when we call the in v-on. To pass…

  • Introduction to Vue.js Event Handling — More Modifiers

    Vue.js is an easy to use web app framework that we can use to develop…