uniapp传递数值（数字）时需要使用v-bind的形式（加上冒号）

爱看老照片2026-04-03 10:24

父组件传数值类型到子组件需要使用 v-bind的方式，如

在子组件UserInfo.vue中限制参数username的类型为String:

复制代码

	//申明对象形式的参数
	const props = defineProps({
		username:String, //限制为String 类型
		avatar:String
	})

在模板层中插入username

复制代码

<template>
	<view class="userinfo">
		<image :src="avatar" mode="" class="avatar"></image>
		<view class="username">{{username}}</view>
		<!-- <view class="username">{{myName}}</view> -->
	</view>
</template>

在父组件componentDemo.vue中传值

复制代码

<template>
	<view>
		<UserInfo username="Michael Cole" avatar="../../static/logo.png"></UserInfo>
		// 未使用v-bind，将会被视为字符串类型，程序正常执行，不会报错！
		<UserInfo username="111" avatar="../../static/pic2.jpg"></UserInfo>
		// 使用v-bind(前面加冒号)，将会被视为数值类型，程序会报错！
		<UserInfo  :username="111" avatar="../../static/pic2.jpg"></UserInfo>
		<UserInfo :username="name" avatar="../../static/pic3.jpg"></UserInfo>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const name = ref("Bagwill");
	
</script>

<style>
	       
</style>

报错信息如下：