王依米

没脑子

组件参数校验与非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="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>

阅读更多
个人分类: vue.js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

组件参数校验与非props特性

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭