一.单对象传值
父组件定义对象的值
<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>效果：
部分展示不出来，需要拉滚动条才能展示。
