版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40990854/article/details/89070647
一、props特性
- props:[‘content’],
- 如果只是简单的一种限制可以这么写
注意：如果是数字，content前需要加 ：props:{ content:Number }, - 几种一起 数字或字符串
props:{ content:[Number,String] }, - 多种定义，限制
props:{ content:{ type:String, // 传值类型 required:true, // 是否必填 default:'Default value', // 默认值 validator:function (value) {// 满足要求返回true 否则返回 false,检查传入的值 value return value.length > 5 } },
二、非props特性:父组件传值，子组件不接
- 不写props:这种会报错
- 组件写死了，content就会出现在最外层的document标签中
template:'<div>Hello</div>' --> <div content="Hel">Hello</div>（编译后）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件参数校验与非props特性</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child content='Hel'></child>
</div>
<script type="text/javascript">
/*
组件参数校验:父组件往子组件进行传递一些数据时，子组件对这些数据进行的一些限制 | 约束
*/
Vue.component('child',{
/*
一、props特性
1、props:['content'],
2、如果只是简单的一种限制可以这么写
注意：如果是数字，content前需要加 ：
props:{
content:Number
},
3、几种一起 数字或字符串
props:{
content:[Number,String]
},
4、多种定义，限制
props:{
content:{
type:String, // 传值类型
required:true, // 是否必填
default:'Default value', // 默认值
validator:function (value) {// 满足要求返回true 否则返回 false
return value.length > 5
}
}
},
二、非props特性:父组件传值，子组件不接
1、不写props:这种会报错
2、组件写死了，content就会出现在最外层的document标签中
template:'<div>Hello</div>' -->
<div content="Hel">Hello</div>
*/
template:'<div>Hello</div>'
})
var vm = new Vue({
el:'#root',
});
</script>
</body>
</html>