vue.js - vue props属性无法校验
本文介绍了vue.js - vue props属性无法校验的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-project</title>
<script src="node_modules/_vue@2.4.2@vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>{{ parentValue }}</h3>
<example :propA="parentValue"></example>
</div>
<script>
Vue.component('example', {
props: {
//propA的类型为Number
propA: {
type: Number,
},
},
template: '<span> {{ propA }} </span>',
});
var vm = new Vue({
el: "#app",
data: {
parentValue: 'abcd',
}
});
</script>
</body>
</html>
propA绑定到了parentValue的值，类型验证定义为Number，当parentValue为字符串的时候为什么会没有出现错误？
解决方案
把代码写对后，如果使用的不是min版的vue.js，可以从控制台中看到warn提示：
Number, got String.
found in
---> <Example>
<Root>
<div id="app">
<h3>{{ parentValue }}</h3>
<example :prop-a="parentValue"></example>
</div>注意html是不区分大小写的，所以propA根本没有传递给子组件，当然不会有错误提示，除非你还声明了required
这篇关于vue.js - vue props属性无法校验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
