当前位置：首页 > article >正文

uni-app学习笔记十二-vue3中组件传值(对象传值）

article 2025/8/22 13:19:46

一.单对象传值

父组件定义对象的值

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

效果：