组件参数校验与非props特性

最新推荐文章于 2024-07-11 14:02:17 发布

依米_

最新推荐文章于 2024-07-11 14:02:17 发布

阅读量446

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_41153478/article/details/80333971

版权

vue.js 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

</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>