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