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

一.单对象传值

父组件定义对象的值

html 复制代码
<template>
	<view>
		<UserInfo :obj="userinfo"></UserInfo>
	</view>
</template>

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

子组件中使用

javascript 复制代码
<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>

效果:

在父组件中再添加一个子组件

javascript 复制代码
<template>
	<view>
		<UserInfo :obj="userinfo"></UserInfo>
        <UserInfo ></UserInfo>
	</view>
</template>

刷新页面报错,因为在第二个子件未指定对象,子组件也未指定默认值,所以报错。解决办法,在子组件中声明一个默认对象:

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

二.多对象传值

修改父组件代码

html 复制代码
<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>

子组件维持不变

html 复制代码
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>

效果:

部分展示不出来,需要拉滚动条才能展示。

相关推荐
【上下求索】4 小时前
学习笔记090——Ubuntu 中 UFW 防火墙的使用
笔记·学习·ubuntu
NeRF_er4 小时前
STORM代码阅读笔记
大数据·笔记·storm
UQWRJ4 小时前
菜鸟教程Linux ViVimYumApt笔记
linux·运维·笔记
程序员Xu4 小时前
【OD机试题解法笔记】查找接口成功率最优时间段
笔记·算法
hhj123k5 小时前
渗透作业3
网络·学习
心一信息5 小时前
HCIE学习之路:一个NAT实验
学习·计算机网络·智能路由器
wb1896 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
Se_ren_di_pity6 小时前
CS231n2017-Lecture9经典CNN架构笔记
人工智能·笔记·cnn
蓝桉8026 小时前
opencv学习(视频读取)
人工智能·opencv·学习