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