码迷,mamicode.com
首页 > 其他好文 > 详细

组件参数校验与非props特性

时间:2019-04-13 15:06:20      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:表达   显示   style   com   ber   html   数字   cti   ret   

父组件传参到子组件,子组件可以对他进行约束,string、number等

 

没有冒号表示字符串

<child  content="123" ></child>

有冒号表示数数字,

加了冒号这是js表达式

<child  :content="123" ></child>

这一种没有约束

Vue.component(‘child‘,{		 
	props:[‘content‘],
template:`<div>{{content}}</div>`
}

约束是字符串或是数字

Vue.component(‘child‘,{		
			props:{
				//即可以是数字有可以是字符串
					content:[Number,String,]
				},
				template:`<div>{{content}}</div>`
			})

约束是对象

Vue.component(‘child‘,{	
                 props:{				
		       content:{
				type:String,
				//是否为必须传入
				 required:false,   
				 //如果没有content传入,就显示这个
					default:‘default value‘,
				}
}, template:`<div>{{content}}</div>` })

  自定义约束

Vue.component(‘child‘,{	
props:{

				//是对象
					content:{
						type:String,
						//是否为必须传入
    					        required:false,   
    					       //如果没有content传入,就显示这个
					 	default:‘default value‘,
					
 						//自定义校验器
 						validator:function(value){
 							return(value.length > 5)
  						}
 					},
}
template:`<div>{{content}}</div>`
				
})

  

 

组件参数校验与非props特性

标签:表达   显示   style   com   ber   html   数字   cti   ret   

原文地址:https://www.cnblogs.com/yubaibai/p/10701148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!