一、父传子
1、父页面:
<userPage :num='4'></userPage>
2、子页面(props 接收)
(对象方式接收)
export default{
props:{
num{
type: Number, //传参的类型
required: true, //是否必传
default: 1 //如果未定义,默认值就是1
}
}
}
(数组方式接收)
export default{
props['num']
}
二、子传父
1、子页面(this.$emit 传递)
<button @click="chuanZhi"></button>
export default {
data(){
return {
num:1
}
},
methods:{
chuanZhi(){
//aa是自定义事件名,this.num传参
this.$emit('aa',this.num)
}
}
}
2、父页面(@aa方法接收)
<userPage @aa='fn(2)'></userPage>
fn(a){
console.log(a) //1
}
三、在子组件跟新父组件数据(.sync)
1、父组件 /useer【id,id】
<user-selection :userIds.sync="useer"></user-selection>
2、子组件
handle(){
this.$emit("update:userIds",[1,2,3])
}