vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "percentage". Expected Number with value 0, got String with value "".
时间: 2023-08-03 17:29:13 浏览: 138
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.
5星 · 资源好评率100%
这个警告是由于你在给一个组件传递props时,传递的值类型与组件所期望的类型不匹配导致的。
在这个具体的警告中,是你给一个名为"percentage"的props传递了一个空字符串,而组件期望这个props的类型是Number类型,并且期望这个值的初始值是0。
为了解决这个问题,你需要在传递props时,传递一个合法的Number类型的值,或者在组件中给这个props设置一个默认值,例如:
```
<template>
<div>
<child-component :percentage="50"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>{{ percentage }}</div>
</template>
<script>
export default {
props: {
percentage: {
type: Number,
default: 0
}
}
}
</script>
```
上面的例子中,我们在父组件中给子组件传递了一个值为50的Number类型的props。而在子组件中,我们定义了percentage这个props的类型为Number,并且给它设置了一个默认值为0。这样,即使父组件没有传递这个props,组件也可以正常工作,而不会出现类型检查失败的警告。
阅读全文