Coming from React, I really enjoyed passing down destructured props to child components, I thought it made the components cleaner and easier to read. Recently, I've been working a lot in Vue and thought Id share how to do the same thing we can do in React but in Vue.

The Skinny

<my-component v-bind="propsObjectIWantToSendToChild" />

The not so skinny

What does v-bind do?

From the docs:

Dynamically bind one or more attributes, or a component prop to an expression.

What does this mean?

We know in HTML we can add a class as an attribute

<p class="my-class">Here is a p tag</p>

But in Vue we might want to conditionally set the class using some Javascript.

computed: { loadingClass() { return isLoading ? 'active' : ''; } } // template
<p v-bind:class="loadingClass">Here is a p tag</p>

Or we can use the nice shorthand Vue gives us for v-bind, removing v-bind and just adding :class

<p :class="loadingClass">Here is a p tag</p>

Passing props

Usually, if I want to pass props to a component, we do something similar to the example above.

<my-component :user-id="userId" :user-name="userName" />

But sometimes we need to pass more than 1 or 2 props and it becomes a bit hard to keep track of and bloats the template.

Insert v-bind

We can take the same component and do something like the following.

// my_parent_component.vue computed: { myProps() { //please dont use this as a
computed function name :) return { userName: this.userName, userId: this.userId
}; }, }, // template <my-component v-bind="myProps" />

Then in my component you declare your props like any other component:

// my_component.vue
props: {
  userId: {
    required: true,
    type: String,
  },
  userName: {
    required: true,
    type: String,
  },
},

Hopefully this helps clean your templates up and you learned something.

Resources

• https://vuejs.org/v2/guide/components-props.html
• https://vuejs.org/v2/api/#v-bind