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)
          thi