Vue Component Events

Posted on  by admin

Hi Vue developer! Surely you’ve already used lifecycle hooks in Vue in order to perform different actions when the component is created, mounted or destroyed.

You’ve also probably used custom events for communication between a component and its parent.

How to validate an emitted event

But… did you know that Vue’s lifecycle hooks emit their own custom events? Yeah, that’s something Damian Dulisz showed with this tweet and it was enlightening. You might be thinking… Why should I care, Alex?

Well, it’s a good to know trick that can be useful in some cases.

I’m going to show you a couple of them in this article. Vue’s lifecycle hooks emit custom events with the name of the hook itself, prefixed by hook:. For example, the mounted hook will emit a hook:mounted event. You can therefore listen to children hooks from the parent components, just as you would do with any custom event:. That can be useful as well to react to third-party plugins hooks.

For instance, if you want to perform an action when v-runtime-template finishes rendering the template, you could use the @hook:updated event:.

Event Modifiers

Seems like magic, ha?

Probably you’ve already come across these cases and you created a hook on the child just to let the parent know that the hook was called. Well now you know it’s not necessary. Although uncommon, there could be some occasions when you’d need to register a hook dynamically the same way you can create custom events dynamically.

You can do that by using the $on, $once and $off hooks.

Take the following example, taken from Damian’s tweet, creating a beforeDestroy hook dynamically due to the fact that is creating a wrapper Vue component for Pickaday: a plain JavaScript date-picker library. Since the plugin must be created on the mounted hook and it’s not saving the instance in a reactive state variable, the only way to do something with it is by registering the beforeDestroyed hook right after creating the Pickaday instance:.

You’ve seen the trick of using the hook: events to react to the hook calls without the need to emit any event manually.

Methods in Inline Handlers

You can see the code and a demo of this article in this Codesandbox. You’re browsing the documentation for v2.x and earlier. For v3.x, click here. We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

The button above has been clicked {{ counter }} times. The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v-on attribute isn’t feasible. That’s why v-on can also accept the name of a method you’d like to call.

Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:. Sometimes we also need to access the original DOM event in an inline statement handler.

You can pass it into a method using the special $event variable:. It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers.

Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details. To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot. Order matters when using modifiers because the relevant code is generated in the same order.

Therefore using v-on:click.prevent.self will prevent all clicks while v-on:click.self.prevent will only prevent clicks on the element itself. Unlike the other modifiers, which are exclusive to native DOM events, the .once modifier can also be used on component events.

Listening to Events

If you haven’t read about components yet, don’t worry about this for now.

Vue also offers the .passive modifier, corresponding to addEventListener‘s passive option. The .passive modifier is especially useful for improving performance on mobile devices. Don’t use .passive and .prevent together, because .prevent will be ignored and your browser will probably show you a warning.

Remember, .passive communicates to the browser that you don’t want to prevent the event’s default behavior. When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for v-on when listening for key events:.

You can directly use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case.

In the above example, the handler will only be called if $event.key is equal to 'PageDown'.

The use of keyCode events is deprecated and may not be supported in new browsers. Using keyCode attributes is also permitted:. Vue provides aliases for the most commonly used key codes when necessary for legacy browser support:. .delete (captures both “Delete” and “Backspace” keys).

A few keys (.esc and all arrow keys) have inconsistent key values in IE9, so these built-in aliases should be preferred if you need to support IE9.

You can also define custom key modifier aliases via the global config.keyCodes object:. You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed:.

Note: On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the Windows key (⊞). On Sun Microsystems keyboards, meta is marked as a solid diamond (◆). On certain keyboards, specifically MIT and Lisp machine keyboards and successors, such as the Knight keyboard, space-cadet keyboard, meta is labeled “META”.

On Symbolics keyboards, meta is labeled “META” or “Meta”. Note that modifier keys are different from regular keys and when used with keyup events, they have to be pressed when the event is emitted.