Vue Event Listeners

Posted on  by admin

Today, I will explain about $listeners and $attrs of Vue. These features may probably be underestimated among developers despite the handy features since there is not enough information on the internet.

The Special key Filter

Try to search $listeners vue$attrs vue. You won't grasp the whole concept of $listeners and $attrs by reading and watching the information you find.

I am the one who has been feeling that way.

So I decided to contribute to helping other developers who can't fully understand that.

So, the code will be below when the click event is required.

What kind of situation $listeners and $attrs would be useful?

Pretty basic code of handling event. This time clickHanlder is invoked when the button is clicked. Nothing is complicated. But how about this situation? In this situation, the click event is not invoked in inherited-child.

To make it possible, click event here should be passed to inherited-child.

Adding $listeners will resolve this problem.

$listeners and v-bind="$attrs"

Now, sayHello function is successfully invoked when clicked. This is very straightforward.

If you are a Vue developer, $listeners can be used more casually.

$listeners is used for passing the event to be invoked in a child component. As similar to $listeners, Setting v-bind="$attrs" in a parent component with props can be also used for passing data.

Conclution

Both id and name props are passed to inherited-child from the parent component. And the key point is it is not necessary to receive props in the child component. I have explained about $listeners and $attrs by using an example of the parent&child components.

However, these can be more useful when you need to pass the event or data to a deeper hierarchy. For example, In the situation below if we need to pass the event and data from A component to C component, $listeners and $attrs can be set in B component.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

Of course, Setting emit or props in the B component will also make it work exactly the same. However, It bothers you adding them in both B and C components. In addition, That's not readable and also confuse the developers to update in the future.

If the project has Vuex installed we could rely on storing data using that but otherwise, you could probably have an opportunity using $listeners and $attrs sometime soon.

Vue has a lot of useful features but not all of the details are introduced carefully. Since utilizing features makes the project more concise, I will keep publishing these things to encourage especially beginners to write code more simple and clean.

Modified2 years, 7 months ago.

If I add window event listeners like window.addEventListener('beforeunload', (event) => { .. }) in the created() method, do I still need to remove the listeners in beforeDestroy()?

And second question: is it possible to add window events using Vue functions rather than window.addEventListener?

126126 bronze badges. 64.7k164164 gold badges415415 silver badges621621 bronze badges. 415415 silver badges621621 bronze badges. You can use the v-on directive to bind event listeners to DOM events. It can be bound to either an event handler function (without the invocation parentheses) or an inline expression.

Why Listeners in HTML?

If a handler function is provided, it will get the original DOM event as the argument. The event also comes with an extra property: targetVM, pointing to the particular ViewModel the event was triggered on:.

targetVM could be useful when v-on is used with v-repeat, since the latter creates a lot of child ViewModels. However, it is often more convenient and explicit to use an invocation expression passing in the current alias, which equals the current data object being iterated on:.

When you want to access the original DOM event in an expression handler, you can pass it in as $event:. When listening for keyboard events, we often need to check for common key codes.

Browse other questions tagged javascriptvue.jsdom-events or ask your own question.

Vue.js provides a special key filter that can only be used with v-on directives. It takes a single argument that denotes the key code to check for:.

It also has a few presets for commonly used keys:. Check the API reference for a full list of key filter presets.

You might be concerned that this whole event listening approach violates the good old rules about “separation of concern”.

  • .enter
  • .tab
  • Rest assured - since all Vue.js handler functions and expressions are strictly bound to the ViewModel that’s handling the current View, it won’t cause any maintainance difficulty.
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

In fact, there are several benefits in using v-on:. It makes it easier to locate the handler function implementations within your JS code by simply skimming the HTML template.

Since you don’t have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free.

Invoke Handler with Expression

This makes it easier to test.

When a ViewModel is destroyed, all event listeners are automatically removed. You don’t need to worry about cleaning it up yourself.

  • .ctrl
  • .alt
  • .shift
  • .meta

Next up: Handling Forms. Caught a mistake or want to contribute to the documentation? Fork this site on Github! In this article, we'll go through the process of adding up the Event Listener on a simple button and compare the methods form both Vanilla JavaScript & Vue JS. Modified2 years, 5 months ago. I'm currently building a small alarm application with Vue.js.

I want to have an eventListener on buttons with a class of "del" that calls a method and hands over the event, I'm using Vue's "mounted" feature for that: .

In that method I want to get the id of the button that was clicked and do something with it:. I spent hours on figuring out what's going wrong but I can't get it. Edit: The way I want to do this is important, because the buttons are part of a dynamic list, that gets rendered via v-html. This is the method that adds the HTML to the data variable:. And this is how the variable gets rendered out with the v-html directive:.

What is $listeners? How is it used?

I'm not sure how to go about the event listener approach, but I think using the v-for directive with a vue template would allow you to do what you need.

Then you could workshop your deleteAlarm() function to either delete the row, or delete the item from the alarms array.

Reference

This example demonstrates an event listener and a binding.

  • .left
  • .right
  • .middle

Update: I updated the fiddle to demo both, the binding and an even listener.

Why Listeners in HTML?

Here is a Fiddle. 44 gold badges3030 silver badges5252 bronze badges.

  1. 5252 bronze badges.

  2. Since you don’t have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test.

  3. When a ViewModel is destroyed, all event listeners are automatically removed. You don’t need to worry about cleaning it up yourself.

Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify .