使用 v-bind="obj" 可批量传递 props，要求对象 key 与子组件 props 名完全一致；多余字段被忽略；静态 props 会覆盖同名对象字段；推荐用 computed 或 reactive 封装逻辑以提升可维护性。

当组件接收的 props 过多时，逐个写 v-bind:xxx="xxx" 不仅冗长，还容易出错、难维护。更简洁的方式是用 v-bind（即 :）直接绑定一个对象，Vue 会自动把对象的每个属性展开为对应的 prop。

用 v-bind 传整个对象，语法很简单

只要把一个普通 JavaScript 对象传给 v-bind，不加引号、不加花括号，Vue 就会把它“解包”成多个 props：

<user-card v-bind="userInfo" />

等价于手动写：

<user-card
  :name="userInfo.name"
  :age="userInfo.age"
  :email="userInfo.email"
  :avatar="userInfo.avatar"
  :is-active="userInfo.isActive"
/>

对象里的 key 名必须和子组件的 props 名完全一致

这是关键前提。比如子组件定义了这些 props：

props: {
  title: String,
  desc: String,
  level: Number,
  isPublished: Boolean
}

那么父组件传的对象就必须这样写：

• title → 对应 title，不能写成 name 或 headline
• isPublished → 注意命名一致性，不能写成 is_published 或 published
• 如果对象里有子组件没声明的字段（如 id），它会被忽略，不会报错

可以和静态 props 混用，但注意覆盖顺序

静态 props 会覆盖同名的 v-bind 对象中的值（后写的优先）：

<user-card v-bind="userInfo" :name="'临时改名'" :is-active="false" />

上面例子中：
- name 最终取 '临时改名'（静态值覆盖对象里的）
- is-active 取 false
- 其他未重复的字段（如 email、avatar）仍来自 userInfo

配合 computed 或 reactive 提升可读性和响应性

别直接在模板里拼对象，推荐封装逻辑：

• 用 computed 动态组合 props 对象，便于复用和测试
• 在 setup 中用 reactive 或 ref 管理源数据，确保响应式更新能同步到子组件
• 必要时做字段过滤或转换，比如把 user.full_name 映射为 title