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>

效果:

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

相关推荐
vayy9 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
哈基米喜欢哈哈哈10 小时前
Kafka复制机制
笔记·分布式·后端·kafka
麻雀无能为力10 小时前
python自学笔记14 NumPy 线性代数
笔记·python·numpy
竹杖芒鞋轻胜马,夏天喜欢吃西瓜12 小时前
二叉树学习笔记
数据结构·笔记·学习
_Kayo_13 小时前
React 学习笔记2 props、refs
笔记·学习·react.js
知识分享小能手14 小时前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
FAIRY_STARS15 小时前
记录uni-app好用的select组件
uni-app
FAIRY_STARS15 小时前
关于uni-app pages.json配置详解
uni-app
speop16 小时前
【datawhale组队学习】RAG技术 -TASK05 向量数据库实践(第三章3、4节)
数据库·学习
阿阳微客16 小时前
CSGO搬砖项目详解:从装备选择到市场策略
笔记·学习·游戏