vue之$emit返回值

使用场景：子组件调用父组件的方法并获取到父组件方法的返回值

方法(一): 回调函数:

1.子组件方法：

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

2、父组件方法

……
 
methods：{
 
        ShowMore(step,callback){
 
                let  result = step++;//这里只做一个demo,这里是父级方法体执行完成后,返回一个值.
 
                callback(result);//这是关键,调用子组件中的回调方法.
 
        }
 
}
 
……

如果是兄弟组件的话采用事件车

// 定义全局事件车
Vue.prototype.$bus= new Vue();
……
created() {
this.$bus.$on('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);
                });
 
        }
 
}
 
……