01.一个更简单的方法来传递大量的props

今天，我们来学习一下 Vue 技巧小册，本节是第一节课，也就是标题所示： 用更简单的方式来传递大量的 props，事例是用 vue3来演示的，当然在 vue2 中也适用。

我们直接进入正题，假设我们有一个显示用户信息的组件，如下所示：

<template>
  <div>
    <p>姓名：{
  { name }}</p>
    <p>职业：{
  { job }}</p>
    <p>年龄：{
  { age }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  name: String,
  job: String,
  age: Number,
})

const count = ref(0)
</script>

该组件接收三个参数，分别是 用户姓名、工作、以及年龄。在 template 中把对应的这三个字段值显示出来。

然后，在父组件中，引入 User 组件，声明一个 userInfo 对象，然后给 User 组件传入这三个参数，如下所示：

<template>
  <User :name="userInfo.name" :job="userInfo.job" :age="userInfo.age" />
</template>

<script setup>
import { reactive } from 'vu