Vue组件参数校验与非props特性

父组件传参到子组件,子组件能够对他进行约束,string、number等html

 

没有冒号表示字符串ui

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

有冒号表示数数字,spa

加了冒号这是js表达式code

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

这一种没有约束component

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

约束是字符串或是数字htm

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>` })

  自定义约束blog

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

				//是对象
					content:{
						type:String,
						//是否为必须传入
    					        required:false,   
    					       //若是没有content传入,就显示这个
					 	default:'default value',
					
 						//自定义校验器
 						validator:function(value){
 							return(value.length > 5)
  						}
 					},
}
template:`<div>{{content}}</div>`
				
})
相关文章
相关标签/搜索