Invalid prop: type check failed for prop "xxx". Expected Number, got String.
2024-10-10 09:36:53
在子组件progress-circle.vue的template中的定义如下：
<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg>
在子组件progress-circle.vue的script中的props：radius和percent都是从父组件传递过来的数据
props: {
radius: {
type: Number,
default: 100
},
percent: {
type: Number,
default: 0
}
}
父组件player.vue中引用progress-circle子组件
<progress-circle radius="32" :percent="percent">
然后就报上面的错误了。
分析：由于radius是从父组件传递给子组件的数据，在父组件中定义的时候是直接定义一个变量而不是绑定一个变量，那么当传递给子组件的时候这个变量的值是一个字符串。但是在子组件中radius的类型是number，因此该变量应该还是要绑定传给子组件的。
解决的方法：只需要在父组件中做改变，在父组件中的定义如下
<progress-circle :radius="radius" :percent="percent">
在父子间中的data中定义一个变量radius,如下所示
data() {
return {
//防止快速点击造成的bug
songReady: false,
currentTime: 0,
radius: 32
}
}
最新文章
- Windows内核开发中如何区分文件对象究竟是文件还是文件夹？
- Kafka server.properties配置说明（转）
- Nibbler – 免费的网站测试和指标评分工具
- TP中手动加载类库
- 关于OpenGL的性能方面的技巧（不时更新）
- 外观模式（Facade Pattern）
- nodeschool.io 3
- android 语言切换过程分析
- [ios]ios的延迟执行方法
- 怎样用AIDL Service 传递复杂数据
- Oracle存储过程中不支持DML语言的解决方法（针对遇见的DROP关键字）
- contenteditable 属性
- iOS开发UI 篇—CAlayer层的属性
- northern truck 是什么牌子？具体_百度知道
- poj1183 反正切函数的应用（水）
- jquery虎牙TV3D轮播特效
- C# Swagger 生成接口文档
- NEO从入门到开窗(2) - 智能合约的面相
- ASP.NET MVC 中读取项目文件的路径
- Lodop获取客户端主网卡ip地址是0.0.0.0