父组件传参到子组件,子组件可以对他进行约束,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>` })
原文:https://www.cnblogs.com/yubaibai/p/10701148.html