vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法

子级组件中的实现

组件名称:EditTable.vue

export default{

     name:'ET',

    .......  

 

methods:{

        ShowMore(step){
            this.$emit("ChildClick",step);
        }

}

  .........

}

父级组件:

      引入: import EditTable from '../EditTable.vue';

    不要忘记在父级组件的  components 里面注册;

     父级组建中调用子级的位置:

    <EditTable  @ChildClick="ShowMore"></EditTable>

一、子组件调用父组件方法:

1.子组件方法:

……

methods:{

        ShowMore(step){
            this.$emit("ChildClick",step);
        }

}

……

第一个参数为父组件中调用子组件时@ChildClick方法名,必须保持一致；

第二个为父级组件中的方法需要的参数; 
 

2.父组件方法:

这里只做一个demo,这里是父级方法体执行完成后,返回一个值

……

methods：{

        ShowMore(step){

                let  result = step++;.

        }

}

……

3.父组件中引用子组件的地方

子组件：EditTable

<EditTable  @ChildClick="ShowMore"></EditTable> 

一定要加上@ChildClick="ShowMore",@后面的ChildClick是子组件中$emit的第一个参数值.

注:为了方便,一般这些方法全部使用一个名字,也可以保障不出错。

二，父组件处理完业务回调子组件

调用方法参考（一）。父组件回调方法这里介绍两种：

方法(一): 回调函数:

1.子组件方法：

……

methods:{
        ShowMore(step){
                this.$emit("ChildClick",step,(res)=>{
                          //回调函数的方法体.处理自己的业务.
                 });

        }

}

……

2.父组件方法:

……

methods：{

        ShowMore(step,callback){

                let  result = step++;//这里只做一个demo,这里是父级方法体执行完成后,返回一个值.

                callback(result);//这是关键,调用子组件中的回调方法.

        }

}

……

方法(二):采用Promise

1.子组件方法

……

methods:{

        ShowMore(step){

               let res = await  this.$emit("ChildClick",step);

                //拿到res后,如果还有其他逻辑,继续处理返回值 res; 下略.               

        }

}

……

2.父组件方法

……

methods：{

        ShowMore(step,callback){

                return new Promise((resolve)=>{

                           let res = step++;

                           resolve(res);
                });

        }

}

……

以上就是vue中,子组件通过$emit调用父组件中的方法后,回调子组件中的方法的处理方式.希望对你有所帮助.文中如有错漏,还请指正.