组件参数校验与非props特性

Posted 2021-02-16 yubaibai

父组件传参到子组件，子组件可以对他进行约束，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>`
				
})