A Simpler Way to Pass Lots of Props

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) {
          // ...
        }
      },
    };
  },
};

A Simpler Way to Pass Lots of Props

Related Articles

How to Dynamically Add a Class Name in Vue

How to Implement a Mouseover or Hover in Vue

The correct way to force Vue to re-render a component

How to Call a Method on Page Load in Vue 3 (with Reset)

Your code works — but do you know if it's any good?

Your code works —
but do you know if it's any good?