props父子传参父组件传递多个参数给子组件
父组件可用通过v-bind传递一个对象,把props所有的属性传给子组件
<Dbutton v-bind="{content:'abc',name:'button'}" />
// =========
props:{
content:{
type:String,
default(){
return '缺省内容'
},
},
name:{
type:String,
default(){
return 'hhh'
}
}
},
props的校验
1.required表示这个属性是必传的,布尔值
2 props对象形式设置validator,validator是一个函数,返回一个布尔值,用于参数校验
props:{
content:{
type:String,
required:true,
default(){
return '缺省内容'
},
valodator(data){
return ['abc','dec'].includes(data)
}
}
},
props父传子单向数据流
父组件通过props传递给子组件的属性,子组件只能展示,不能直接修改。如果子组件要修改的话,可以采用初始化赋值的形式,这样props只起到传递作用。
- 在data中把props的属性赋值给子组件data数据
- 子组件直接修改data数据
<div @click="text = 123"> {{text}}</div>
// ======
props:{
content:{
type:String,
default(){
return '缺省内容'
},
}
},
data(){
return {
text:this.content
}
},