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

Posted 2022-08-03 @大迁世界

今天，我们来学习一下 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