9.组件参数校验和非props特性
2018-07-07 本文已影响4人
yaoyao妖妖
1.组件参数校验
父组件向子组件传递一些内容，子组件对他进行一些约束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<child content="hell"></child>
</div>
<script>
Vue.component('child',{
//约束父组件传递的值的类型
props:{
content:{
// 1.content:String
// 2.content:[String,Number]
type: String, //传值类型
required: false, //传值是否是必须的
default: 'default value',//没有传content时，默认显示的值
validator:function(value){
return (value.length > 5)//传入的字符串长度必须大于5
}
}
},
template:'<div>{{content}}</div>'
})
var app = new Vue({
el:'#root',
})
</script>
</body>
</html>
2.非props特性
props特性就是父组件定义了content属性，子组件props接收，子组件可以直接使用这个属性，dom标签不会展示出这个content。
非props特性就是父组件定义了content属性，但是子组件没有props接收，dom标签会展示出这个content。
