父组件传值给子组件
1.父向子传值props
父组件:
子组件:
(1)props: {
inputName: String,
required: true
}
(2)props: [“inputName”]
2子组件给父组件传值
//子组件自定义一个按钮触发onSubmit()方法;
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
</el-form-item>
//子组件定义要传递的参数
data(){
return{
childData:'子组件数据data',
}
}
methods:{
onSubmit() {
//将子组件的childData通过this.$emit()参数传递给 父组件中自定义的'add-num'
this.$emit('add-num',this.childData)
console.log("子组件---------",this.childData)
},
}
//首先父组件引入子组件 此处@add-num 会监听addNumber()方法
<main-menu @add-num="addNumber"></main-menu>
//父组件定义parentData参数接收
data(){
return{
parentData:''
}
}
methods:{
addNumber(data){
console.log("父组件---------",data)
this.parentData= data
}
}