vue3父组件把一个对象整体传入子组件，还是把一个对象的多个属性分成多个参数传入

以一个对象整体传入时，对象的定义：

TypeScript 复制代码

<template>
  <div>
    <p>姓名: {{ userInfo.name }}</p>
    <p>年龄: {{ userInfo.age }}</p>
    <p>邮箱: {{ userInfo.email }}</p>
  </div>
</template>
<script setup lang="ts">
interface UserInfo {
  name: string
  age: number
  email: string
}

const props = defineProps<{
  userInfo: UserInfo  // 直接使用接口类型
}>()
</script>

父组件调用：

TypeScript 复制代码

<template>
  <!-- 传递一个对象给子组件 -->
  <Child :user-info="userData" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child1.vue'

// 定义一个对象
const userData = ref({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com'
})
</script>

以多个参数传入时，对象的定义：

TypeScript 复制代码

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>邮箱: {{ email }}</p>
  </div>
</template>
<script setup lang="ts">
interface UserInfo {
  name: string
  age: number
  email: string
}

const props = defineProps<UserInfo>()
</script>

父对象调用：

TypeScript 复制代码

<template>
  <!-- 传递多个参数给子组件 -->
  <Child :name="userData.name" :age="userData.age" :email="userData.email" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child2.vue'

// 定义一个对象
const userData = ref({
  name: '张三',
  age: 25,
  email: 'zhangsan@example.com'
})
</script>