<!DOCTYPE html>
<html>
<head>
<title>4-3 Vue 组件参数校验与非props特性</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件通过属性向子组件传值-->
<chlid content="hellow world"></chlid>
</div>
<script type="text/javascript">
//定义一个子组件
Vue.component('chlid',{
//props:['content'],
//用对象的形式校验 Stirng/Number
//props 特性 ：父组件传，子组件收 1.属性值不展示
//非props 特性 ：父组件传，子组件不收 1.子组件不显示2.属性展示DOM中
props:{
//content:Number
//content:String
//content:[String,Number]
content:{
//类型
type:String,
//必传,非false
required:true,
//默认值
default:"default value",
//自定义校验器
validator:function(value){
return (value.length>5)
}
}
},
template:'<div>{{content}}</div>'
})
var app = new Vue({
el:'#app',
})
</script>
</body>
</html>
2257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
