父组件传递content="hello world"，子组件有权对其进行约束，或者说校验
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
//这依然是字符串 <br>
<child1 content="1"></child1>
//用:的方式，引号内的是js表达式，如果是数字，它就是数字类型 <br>
<child2 :nums="2"></child2>
<child3 other="123456"></child3>
<child4 isProps="is false"></child4>
</div>
<script type="text/javascript">
Vue.component("child1", {
/*//如果要进行约束，就不要像这样是数组，改为对象咯
props: ["content"],*/
props: {
content: Number //子组件接收的必须是数字类型
},
template: "<div>{{content}}</div>"
});
Vue.component("child2", {
/*//如果要进行约束，就不要像这样是数组，改为对象咯
props: ["content"],*/
props: {
nums: [Number, String] //子组件接收的必须是字符串类型或数字类型
},
template: "<div>{{nums}}</div>"
});
Vue.component("child3", {
props: {
//当然还可以是对象
other: {
type: String, //必须是字符串
required: false, //非必须有
default: "default value", //没有则给默认值
validator: function(value) {
return (value.length > 5) //要求传入的内容长度必须大于5
}
}
},
template: "<div>{{other}}</div>"
});
Vue.component("child4", {
//像这样没有props，则父组件向当前子组件传递的属性也使用不了
template: "<div>{{isProps}}</div>"
});
var vm = new Vue({
el: "#root"
});
</script>
</body>
</html>虽然规定只能传数字，但传了字符串还是能显示，但控制台会警告：
如果子组件中使用了父组件传过来的数据，而不用props，则用不到这个属性，会报错（不接收，怎能使用）：
原文地址：https://blog.51cto.com/5660061/2419508
时间： 2024-10-02 11:39:20