01. A simpler way to deliver a large number of props

today , Let's learn about Vue Skills booklet , This is the first lesson , That is, the title shows ： Deliver a lot of... In a simpler way props, The example is vue3 To demonstrate , Of course. vue2 Also applicable in .

Let's get straight to the point , Suppose we have a component that displays user information , As shown below ：

<template>
  <div>
    <p> full name ：{
  
   { name }}</p>
    <p> occupation ：{
  
   { job }}</p>
    <p> Age ：{
  
   { age }}</p>
  </div>
</template>

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

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

const count = ref(0)
</script>

This component receives three parameters , Namely User name 、 Work 、 And age . stay template The corresponding three field values are displayed in .

then , In parent component , introduce User Components , Make a statement userInfo object , And then to User The component passes in these three parameters , As shown below ：

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

<script setup>
import { reactive } from 'vu