vue中的props验证

责编:menVScode 2017-11-14 23:02 阅读(1738)

props验证

        组件可以为props指定验证要求,如果未指定验证要求,Vue会发出警告。

props:{
    propA: Number, // 指定类型
    propB: [String, Number], // 多种类型
    propC: { type: String, required: true }, // 必传,且为字符串
    propD: { type: Number, default: 100}, // 数值类型,默认值为100
    propE: { type: Number, default: function(){
        return 1000
    }},
    propF: { validator: function(value){return value>10 } } // 自定义验证规则
}

        验证类型为原生构造器:String、Number、FunctionObject、Boolean、Array。

Vue.component('custom-component',{
	props:{
		count:{
			//type:Number,
			//type:[Number,String],
			//default:10
			//required:true
			validator:function (value){ //value的值就是count的值
				console.log(value);	

				return value > 10	//传过来的值必须大于10
			}
		}
	}
})

new Vue({
	el:"#app",
	data:{
		count:20
	},
	methods:{
		countHandle(){
			//alert("子组件点击了");
			this.count++;
		}
	}
})
标签: props vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码