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

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

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

  

    
姓名：{
  { name }}
    
职业：{
  { job }}
    
年龄：{
  { age }}
  



import { ref } from 'vue'

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

const count = ref(0)

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

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

  



import { reactive } from 'vu