<!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提示:
注意html是不区分大小写的,所以propA根本没有传递给子组件,当然不会有错误提示,除非你还声明了required