Vue父组件如何等待子组件b-modal的hide事件关联函数执行完成

现有架构存在的问题 #

• 事件执行顺序无法保证：b-modal的hide事件绑定的多个回调是平级触发的，父组件监听的hide回调和子组件的hidden方法没有先后顺序依赖，尤其是hidden内部存在异步逻辑时，父组件的resolve必然会提前执行。
• 耦合度过高：父组件直接通过多层$refs访问子组件内部的模态框实例，违反组件封装原则，子组件内部逻辑变动会直接影响父组件代码。
• 存在内存泄漏风险：每次调用aFunction都会新增一个hide事件监听器，且没有做解绑操作，重复调用会导致重复触发resolve、内存占用升高的问题。
• 代码笔误：原有父组件模板里按钮的闭合标签误写为</b-modal>，循环语法for(let i=0,i<2<i++)存在语法错误。

实现方案 #

核心思路是让子组件封装整个模态框的生命周期逻辑，对外暴露返回Promise的打开方法，等自身隐藏后的业务逻辑全部执行完成后再resolve该Promise，父组件直接调用该方法即可。

子组件修改后代码 #

<template>
    <b-modal ref="myModal" @hide="handleHide">
    </b-modal>
</template>

export default {
    data() {
        return {
            // 存储Promise的resolve方法
            modalResolve: null
        }
    },
    methods: {
        // 对外暴露的打开模态框方法
        openModal() {
            this.$refs.myModal.show()
            return new Promise(resolve => {
                this.modalResolve = resolve
            })
        },
        async handleHide() {
            // 原有hidden方法的业务逻辑，支持异步操作
            // 示例：await 提交表单、await 接口请求等
            // ... 你的业务逻辑
            
            // 所有逻辑执行完成后resolve，通知父组件
            if (this.modalResolve) {
                this.modalResolve()
                this.modalResolve = null
            }
        }
    }
}

父组件修改后代码 #

<template>
    <div>
        <b-button @click="modal_queue">
            Open modal
        </b-button>
        <child ref="myChild"></child>
    </div>
</template>

export default {
    methods: {
        async modal_queue() {
            for(let i=0; i<2; i++) {
                await this.aFunction()
            }
        },
        async aFunction() {
            // 直接调用子组件暴露的方法，自动等待隐藏+业务逻辑执行完成
            await this.$refs.myChild.openModal()
        }
    }
}

内容的提问来源于stack exchange，提问作者HardCoder_9