现象

父组件传数值类型到子组件需要使用 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>

报错信息如下：

原因

在 Vue 3 中，v-bind（或简写 :）用于动态绑定属性值，它会将等号右侧的内容当作 JavaScript 表达式进行求值 ； 没有v-bind时，属性值是静态字符串，所以总是字符串类型。

简单说：有 v-bind 走 JS 表达式解析，无 v-bind 走静态字符串。