Vue Tips — Slots, Vue Router, and Mutations
Tags: webdev, programming, javascript, vue
Published: 2021-01-25 23:24:46

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Vue.js is a popular framework for creating front end web apps.

In this article, we’ll look at some tips for writing better Vue.js apps.

### How to Pass Down Slots Inside Wrapper Component

To pass down slots in a wrapper component, we can loop through all the slots and pass them down to the child.

For instance, we can write:

```
<wrapper>
  <parent-table v-bind="$attrs" v-on="$listeners">

    <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>

    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>

  </parent-table>
</wrapper>
```

We get the slots with the `$slots` variable.

Then we use `Object.keys` to get names of the slots so that we can loop through all of them and pass the name down.

Likewise, we can loop through the scoped slots with the `$scopedSlots` variables.

We get the keys the same way and loop through them with `v-for` the same way.

With Vue 2.6, the `v-slot=` directive is introduced to let is pass the slots down.

For instance, we can write:

```
<wrapper>
  <parent-table v-bind="$attrs" v-on="$listeners">
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>
  </parent-table>
</wrapper>
```

We loop through the slot with `v-for` .

We get the scoped slots with the `$scopedSlots` variable.

`slot` is the slot name again.

This time, we pass it to the `v-slot` directive as a modifier to pass down the named slot.

`scope` has the scope from the scoped slot.

We use `v-bind` to get the scope.

And we

Alternatively, we can use render function to pass down the slots.

For instance, we can write:

```
render(h) {
  const children = Object.keys(this.$slots)
    .map(slot => h('template', { slot }, this.$slots[slot]))

  return h('wrapper', [
    h('parent-table', {
      attrs: this.$attrs,
      on: this.$listeners,
      scopedSlots: this.$scopedSlots,
    }, children)
  ])
}
```

We get the slots with the `this.$slots` property.

We call `Object.keys` to get the slot names.

And we call `map` on it to map the slot names to the `template` components.

And we pass in the slots name and the scope down,.

Then we return a `wrapper` component with the `parent-table` component with the listeners, attributes, and scoped slots and `children` as the children.

### Get Query Parameters from a URL in Vue.js

We can get the query parameters from a URL in Vue with the `this.$route.query` property.

To get the query parameter `foo=bar` , we write:

```
this.$route.query.foo
```

and we get `'bar'` as the value.

This is available assuming we’re using Vue Router in our Vue app.

If we haven’t added it, we can write:

`index.html`

```
<script src="https://unpkg.com/vue-router"></script>
```

`index.js`

```
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/page',
      name: 'page',
      component: PageComponent
    }
  ]
});

const vm = new Vue({
  router,
  el: '#app',
  mounted() {
    const q = this.$route.query.q;
    console.log(q)
  },
});
```

to get it.

We create the `VueRouter` instance and pass it into the object we passed into the `Vue` constructor.

`routes` has the routes.

### Passing Multiple Parameters to a Mutation with Vuex

To pass multiple parameters to action with Vuex, we can pass in an object as the payload.

For instance, we can create our mutation by writing:

```
mutations: {
  setToken(state, { token, expiration }) {
    localStorage.setItem('token', token);
    localStorage.setItem('expiration', expiration);
  }
}
```

We have an object as the second parameter.

It has the `token` and `expiration` properties.

Then we can invoke the mutation by writing:

```
store.commit('setToken', {
  token,
  expiration,
});
```

We invoke the `setToken` mutation with the `token` and `expiration` properties in an object as the 2nd argument.

### Reload Route with Vue Router

To reload a route with Vue Route, we can call the `this.$router.go()` method.

If it has no arguments, then it’ll reload the current route.

We can also add an unique value for the `key` prop to the router view:

```
<router-view :key="$route.fullPath"></router-view>
```

This way, it’ll notice when the path changes and it’ll trigger a reload of the component with new data.

### Conclusion

We can reload our route with `this.$router.go()` .

There are many ways to pass a scope down to a child.

We can get query parameters in our component if we use Vue Router.

To pass in multiple pieces of data into a mutation, we can pass in an object with all the data we want into the mutation.