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

news2025/6/7 21:32:24

一.单对象传值

父组件定义对象的值

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

效果：