首页 > 其他 > 详细

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

时间:2019-04-13 15:42:35      阅读:146      评论:0      收藏:0      [点我收藏+]

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

  

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!