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