Michael Thiessen

A Simpler Way to Pass Lots of Props

July 2021

Instead of passing in tons of props to a component individually:

<template>

  <User

    :name="user.name"

    :profile="user.profile"

    :twitter="user.twitter"

    :location="user.location"

    :framework="user.framework === 'Vue' ? 'The best' : undefined"

  />

</template>

You can take a whole object and have all of its properties automatically bound to the component as props:

<template>

  <User v-bind="user"/>

</template>
export default {

  setup() {

    return {

      user: {

        name: 'Anakin',

        profile: 'ani-profile.jpg',

        twitter: '@TatooineJedi',

        location: 'Undisclosed',

        framework: 'Vue',

      },

    };

  },

};

This is like spreading props in React, or using the spread operator:

{ ...myObject }

It also works with v-on if you have a lot of event handlers:

<template>

  <User v-on="userEventHandlers"/>

</template>
export default {

  setup() {

    return {

      userEventHandlers: {

        updateName(newName) {

          // ...

        },

        deleteUser() {

          // ...

        },

        addFriend(friend) {

          // ...

        }

      },

    };

  },

};

Related Articles