8 secrets Vue Developers must know
Tags: vue
Published: 2019-07-13 19:17:25

---
title: 8 secrets Vue Developers must know
published: true
description: In this post I will explain 8 Vue tips 
tags: vue 
---

- [Inline statement handler: Handle multiple arguments](#inline-statement-handler-handle-multiple-arguments)
- [Emit event from functional components](#emit-event-from-functional-components)
- [Pass all props to the child component](#pass-all-props-to-the-child-component)
- [Watch child properties changes from parent](#watch-child-properties-changes-from-parent)
- [Listening for child event in the router-view](#listening-for-child-event-in-the-router-view)
- [Vue components lifecycle hooks don't run in the order you think they run](#vue-components-lifecycle-hooks-dont-run-in-the-order-you-think-they-run)
- [How to know if a child component is mounted](#how-to-know-if-a-child-component-is-mounted-)
- [How to know if a dynamically vuex registered module is registered](#how-to-know-if-a-dynamically-vuex-registered-module-is-registered-)

------



## **Inline statement handler: Handle multiple arguments** 

#### **Short Explanation:**

In an inline statement handler besides the `$event` special variable we have access to another special variable: **`arguments`**. `$event` will have access only to the first argument, whilst the `arguments` will have access to all arguments.

#### **Detailed Explanation:**

In an inline statement handler we already know that we have access to the special `$event` variable.

So if a child components emits an event with a parameter, we have access to it by using `$event`:

**Parent component**

```html
<template>
  // ...
   <Child @event="someVariable = $event" />
  // ...
</template>
```

**Child component**

```js
export default {
  //...
    emitEvent () {
      this.$emit('event', 'a simple text')
    }
  //...
}
```

That works really well when the child component, is a component that we have access to, since we can be sure we pass only one parameter.

But how if we use a third-party component/library (e.g. dropzone.js) which passes many arguments up via event ?? 

**The `$event` will have access only to the first argument**. See this codesandbox example which illustrates that `$event` will catch only the first argument. (*Click the button and see the console*)

{% codesandbox vue-event-special-variable-mj92o %}

**In that case, instead of `$event` we can use `arguments` and all arguments will be accessible.**

So in the codesandbox above, in order to make it work, we have to change the line 4 in the `Child.vue`

*from:*

```html 
<GrandChild @event="$emit('event', $event)"/> 
```

*to:*

```html
 <GrandChild @event="$emit('event', arguments)"/>
```

------



## **Emit event from functional components**

#### **Short Explanation:**

Using functional components, means that we don't have access to `this` context. Thus, we cannot do `this.$emit()`. But... we have access to `listeners` so we can do `<button @click="listeners.clicked"></button>`

#### **Detailed Explanation:**

Functional components are stateless (no reactive data) and instanceless (no this context). But functional components have access to some properties such as `props`, `children` etc and most importantly (for this case), `listeners`.

According to [Vue docs](https://vuejs.org/v2/guide/render-function.html#Functional-Components): 
**listeners: An object containing parent-registered event listeners. This is an alias to data.on**

That means that we can emit event from functional components. Wiii :P

**Simple example:**

```html
<template functional>
  <button @click="listeners['custom-event']('message from child')">
    Button from child
  </button>
</template>
```

**Working example** (*click the button and open the console*)

{% codesandbox pjvwo81py7 %}

How if we want to emit an event from functional component with render functions? Can we do that? Of course!

**Simple example:**

```js
export default {
  functional: true,
  render(createElement, { listeners }) {
    return createElement(
      "button",
      {
        on: {
          click: event => {
            const emit_event = listeners.event_from_child;
            emit_event("Hello World!Is this the message we excpected? :/");
          }
        }
      },
      "Pass event to parent"
    );
  }
};
```

**Working example**

{% codesandbox k2nm1zxv8o %}

Someone may wonder if we can use [`.sync` Modifier](https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) using this approach.
The answer ? Of course!

```html
<button @click="listeners['update:message']('some text')">Click me</button>
```

------



## **Pass all props to the child component**

Say that we have a component which receives `props` and we want to pass all those props to a child component. To achieve that, we can do:

```html
  <ChildComponent v-bind="$props" />
```

Taking advantage of `v-bind` we can also have an object like:

```js
data: () =>({
  obj: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  }
})
```

And pass `firstName`, `lastName`, `age` as `props` to a child component, like:


```html
<Child v-bind="obj" />
```

------



## **Watch child properties changes from parent**

You may wonder why to do that and you are right! That's a bad practice. But sometimes you use a third-party component and you want to watch their properties to fit your needs. 

*A long time ago, in a project we were using a date picker and we wanted to be able to detect when the popup was visible. Unfortunately there was no option to do that.I discovered that the date picker was using a `popupVisible` reactive property but it wasn't exposed by the library. So I had to somehow watch this property from my component.*

The below code is **NOT** able to detect changes:

```js
  watch: {
    '$refs.datePicker.popupVisible': {
      handler (new_value) {
        console.log('value changed')
      },
      deep: true
    }
  }
```

In order to detect changes of a child component's property you should do:

```js
  mounted() {
    this.$watch(
      "$refs.picker.popupVisible",
      (new_value, old_value) => {
         //execute your code here
      }
    );
  }
```

**Working example:**

{% codesandbox yk1l5zp9l9 %}

Learn more about [`vm.$watch`](https://vuejs.org/v2/api/#vm-watch)

------



## **Listening for child event in the router view**

Most of you, should already know that since it is straightforward, but I've been asked many times about the question below.

Say you have a component which has nested routes:

```html
<template>
  //...
  <router-view></router-view>
  //...
</template>
```

And you have a nested route as follow:


```html
<template>
  //...
  <button @click="$emit('event')"></button>
  //...
</template>
```

So the component corresponding to a nested route, emits an event. The question is : **how to listen to that event ?**

The simple answer demonstrated with code:

```html
<template>
  //...
  <router-view @event="callAMethod"></router-view>
  //...
</template>
```

*Exactly! We listen to that event in the `router-view` component*

------



## **Vue components lifecycle hooks don't run in the order you think they run**

Say you have 2 pages. Home and About.

When switching from Home to About, **the `created` hook of the About component will run before the `beforeDestroy` hook of Home component.** (*take a moment here*)

Weird?? Try switching routes in the working example below by seeing the console.

{% codesandbox vue-lifecycle-hooks-not-running-in-the-way-you-expect-e4y31 %}

As solution (idk if it's the best solution though) you can use [transition-mode](https://vuejs.org/v2/guide/transitions.html#Transition-Modes) **out-in**

```html
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
```

------



## **How to know if a child component is mounted ?**

This one of my favorite tips I've read [here (Vue Dose)](https://vuedose.tips/tips/listen-to-lifecycle-hooks-on-third-party-vue-js-components)

Say you have a child component and you want to do something when a hook of the child component is executed. You can do:

```html
<Child @hook:created="doSomething" />
```

So the question to *How to know when a child component mounted* is:

```html
<Child @hook:mounted="componentMountedDoSomething" />
```

------



## **How to know if a dynamically vuex registered module is registered ?**

With the power of dynamically [register/unregister](https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration) vuex modules we can improve the performance a lot.

*I recommend you to read a very useful article: [Performance optimization: Lazy load vuex modules](https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976)*

We can register a vuex module:

`this.$store.registerModule('my-module', MyModule)`

And unregister it:

`this.$store.unregisterModule('my-module')`

To know if a module is already registered:

```js
if (Object.keys(this.$store._modules.root._children).includes('my-module')) {
        // module is registered
}
```

> My time is very limited but I am glad that I found some time to write this article (it took me some time though). I hope it helped and you enjoyed reading it.


*I would be very happy if you leave a comment providing your solution. For example regarding the last "secret" you can use vuex store to indicate that a module is registered or not.*

> This is my first article on *DEV community*. Thank you for reading.