以一個對象整體傳入時，對象的定義：

<template><div><p>姓名: {{ userInfo.name }}</p><p>年齡: {{ userInfo.age }}</p><p>郵箱: {{ userInfo.email }}</p></div>
</template>
<script setup lang="ts">
interface UserInfo {name: stringage: numberemail: string
}const props = defineProps<{userInfo: UserInfo  // 直接使用接口類型
}>()
</script>

父組件調用：

<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>

以多個參數傳入時，對象的定義：

<template><div><p>姓名: {{ name }}</p><p>年齡: {{ age }}</p><p>郵箱: {{ email }}</p></div>
</template>
<script setup lang="ts">
interface UserInfo {name: stringage: numberemail: string
}const props = defineProps<UserInfo>()
</script>

父對象調用：

<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>