一.單對象傳值

父組件定義對象的值

<template><view><UserInfo :obj="userinfo"></UserInfo></view>
</template><script setup>import {ref} from "vue"const userinfo = ref({name:"蛛兒",avatar:"/static/girl_004.jpeg"})
</script>

子組件中使用

<template><view class="userInfo"><image :src="obj.avatar" mode="" class="avatar"></image><view class="username">{{obj.name}}</view></view> 
</template><script setup>defineProps(["obj"])
</script>

效果：

在父組件中再添加一個子組件

<template><view><UserInfo :obj="userinfo"></UserInfo><UserInfo ></UserInfo></view>
</template>

刷新頁面報錯，因為在第二個子件未指定對象，子組件也未指定默認值，所以報錯。解決辦法，在子組件中聲明一個默認對象：

<script setup>defineProps({obj:{type:Object,default(){return {name:"朱九真",avatar:"/static/girl_005.jpeg"}}}})
</script>

?二.多對象傳值

修改父組件代碼

<template><view><UserInfo v-for="(item,index) in girls" :obj="item"></UserInfo></view>
</template><script setup>import {ref} from "vue"const girls = ref([{name:"周芷若",avatar:"/static/girl_001.jpeg"},{name:"小昭",avatar:"/static/girl_002.jpeg"},{name:"趙敏",avatar:"/static/girl_003.jpeg"},{name:"蛛兒",avatar:"/static/girl_004.jpeg"},{name:"朱九真",avatar:"/static/girl_005.jpeg"},])
</script>

?子組件維持不變

template><view class="userInfo"><image :src="obj.avatar" mode="" class="avatar"></image><view class="username">{{obj.name}}</view></view> 
</template><script setup>defineProps({obj:{type:Object,default(){return {name:"女6號",avatar:"/static/girl_006.jpeg"}}}})
</script>

效果：

部分展示不出來，需要拉滾動條才能展示。