uni-app props传递

为什么用props?

通过uni-app自定义组件章节，我们创建的属于我们自己的组件，但是在这个组件中，我们的值是不会变的，但是我们自定义组件的目的就是想要让这个组件在不同的位置有相同的效果，不同的内容显示，这个时候我们就需要用到props

props选项

type：会检查prop是否是给定的类型，如果不是就会抛出异常，其中，所包含的类型可以是String、Number、Boolean、Array、Object、Date、Function等，任何自定义构造函数，或者是有上面的类型所组成的数组

default：为这个prop指定一个默认值，如果没有传入一个prop的话，就会使用这个值，类型是：any

required：表示这个prop是否是必须要传入的，类型：boolean

validator：自定义验证函数会将该prop的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个false的值 (也就是验证失败)，一个控制台警告将会被抛出，类型：Function

props声明

在没有<script setup>中

<script>
		export default {
			props: {
				userName: {
					type: String,
					default: "匿名",
					required: false
				}
			}
		}
	</script>

在有<script setup>中

<script setup>
	const props=defineProps({
		userName:{
			type:String,
			default:"匿名",
			required:false
		}
	})
</script>

两者的效果是相同的，个人感觉使用语法糖的方式更加方便

使用方法

传入单个值

/**
 * 自定义组件
*/
<template>
	<view class="userInfo">
		<image src="../../static/logo.png" class="avatar"></image>
		<view class="userName">{{userName}}</view>
	</view>
</template>

<script setup>
	const props=defineProps(['userName'])
</script>

/**
 * 正常页面调用自定义组件，并传值
*/
<template>
	<user-avatar userName="张三"></user-avatar>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

页面效果

传入多个值

/**
 * 自定义组件
*/
<template>
	<view class="userInfo">
		<image :src="avatar" class="avatar"></image>
		<view class="userName">{{userName}}</view>
	</view>
</template>

<script setup>
	defineProps(['userName','avatar'])
</script>

<style lang="scss" scoped>
.userInfo{
	width: 100%;
	height: 200px;
	background: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image{
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	.userName{
		padding: 10px 0;
		font-size: 20px;
	}
}
</style>

/**
 * 正常页面调用自定义组件，并传值
*/
<template>
	<user-avatar userName="张三" avatar="/static/logo.png"></user-avatar>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

 传入对象

/**
 * 自定义组件
*/
<template>
	<view class="userInfo">
		<image :src="obj.avatar" class="avatar"></image>
		<view class="userName">{{obj.userName}}</view>
	</view>
</template>

<script setup>
	defineProps(["obj"])
</script>

<template>
	<user-avatar :obj="userInfo"></user-avatar>
</template>

<script setup>
	import {ref} from "vue";
	const userInfo=ref({
		userName:"李四",
		avatar:"../../static/logo.png"
	})
</script>

<style lang="scss" scoped>
</style>

页面效果

传入对象数组

/**
 * 自定义组件
*/
<template>
	<view class="userInfo">
		<image :src="obj.avatar" class="avatar"></image>
		<view class="userName">{{obj.userName}}</view>
	</view>
</template>

<script setup>
	defineProps(["obj"])
</script>

<template>
	<user-avatar v-for="(item,index) in userInfo" :obj="item"></user-avatar>
</template>

<script setup>
	import {ref} from "vue";
	const userInfo=ref([
		{userName:"张三",avatar:"../../static/logo.png"},
		{userName:"李四",avatar:"../../static/1.jpeg"},
		{userName:"王五",avatar:"../../static/2.jpg"},
	])
</script>

<style lang="scss" scoped>
</style>

页面效果

通过v-for循环出了三个值不一样的用户信息

props校验

使用props的选项对传过来的值进行一个校验，如：通过type规定传过来的值必须是String、Number等，通过default来为没有传值的时候设定一个默认值，接下来通过一个案例来进行props校验：

/**
 * 自定义组件
*/
<template>
	<view class="userInfo">
		<image :src="avatar" class="avatar"></image>
		<view class="userName">{{userName}}</view>
	</view>
</template>

<script setup>
	const props=defineProps({
		userName:{
			type:String,
			default:"匿名"
		},
		avatar:{
			type:String,
			default:"../../static/logo.png"
		}
	})
</script>

<template>
	<user-avatar></user-avatar>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	
</style>

页面结果