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

Want to level up your Vue skills?

With over two million reads and 11,067 subscribers, you've come to the right place.

Subscribe now to get exclusive insights and tips every week.