组件参数校验与非props特性

￡神魔★判官ぃ 2022-05-25 14:27 160阅读 0赞

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