<html>
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--组件参数校验就是子组件对来自父组件的值进行处理-->
<div id="app">
<child :content="123"></child><!--父组件向子组件传递-->
</div>
<script>
Vue.component('child',{
// props:['content'],
//子组件接收来自父组件的变量，如果子组件要接收的是数字，就需要处理了。
//第一步在父组件content前加冒号
//第二步在props里声明number
props:{
content:Number
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
组件的参数校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--组件参数校验就是子组件对来自父组件的值进行处理-->
<div id="app">
<child content="hello world"></child><!--父组件向子组件传递-->
</div>
<script>
Vue.component('child',{
// props:['content'],
//子组件接收来自父组件的变量，如果子组件要接收的是数字，就需要处理了。
//第一步在父组件content前加冒号
//第二步在props里声明number
props:{
// content:[Number,String]//content还可以跟数组，对象
content:{
type:String,
// required:true,//1.表示content必传
// default:'de'//2.表示父组件content可传可不穿，若不传则显示de
validator:function (value) {//3.自定义校验器 validator方法 校验字符串的长度
return (value.length >5)
//若content="he"，小于5 则报错
}
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
非props特性
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--组件参数校验就是子组件对来自父组件的值进行处理-->
<div id="app">
<child content="hello world"></child><!--父组件向子组件传递-->
</div>
<script>
// props特性就是在父组件里声明了content变量,在子组件里刚好props 里接收
// 非props特性就是在父组件里声明了content变量,在子组件里没有定义props 里接收，//那么会在dom标签录里显示content="hello world"
Vue.component('child',{
// props:{
//
// content:{
// type:String,
//
//
// }
// },
template:'<div>heloo</div>'
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>