使用场景：子组件调用父组件的方法并获取到父组件方法的返回值
方法(一): 回调函数:
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);
});
}
}
……
相关链接
发表评论