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

张开发
2026/6/11 5:27:21 15 分钟阅读
uniapp传递数值(数字)时需要使用v-bind的形式(加上冒号)
现象父组件传数值类型到子组件需要使用 v-bind的方式 如在子组件UserInfo.vue中限制参数username的类型为String://申明对象形式的参数 const props defineProps({ username:String, //限制为String 类型 avatar:String })在模板层中插入usernametemplate view classuserinfo image :srcavatar mode classavatar/image view classusername{{username}}/view !-- view classusername{{myName}}/view -- /view /template在父组件componentDemo.vue中传值template view UserInfo usernameMichael 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 :usernamename 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 走静态字符串。

更多文章