Vue子组件传值给父组件this.$emit();

上一篇博客记录了Vue父子组件传值使用props，

这篇来说说子组件传值给父组件的 ——this.$emit('xxx属性',xxx参数)；

子组件：

//子组件自定义一个按钮触发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
   }
}

效果是，子组件中点击 “立即创建” 按钮，效果如下：父组件接收 “子组件数据data” 数据后根据自己业务需要操作即可~

个人记录仅供参考。

 

来源：CSDN

作者：L_WalkingPig

链接：https://blog.csdn.net/L_WalkingPig/article/details/104901182