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