// 堆代码 duidaima.com // 这是一个菜单组件,假设某个菜单项被点击 async menuItemClick() { this.$emit('close') // 先关闭菜单,这里的 $emit 可以起效,父组件接收到 close 后将子组件的 v-if 置为 false,即子组件被销毁 await this.doSomething() // 执行一些异步方法 this.$emit('finish') // 这里 $emit 不起效,因为子组件已销毁 }父组件
<dropdown-menu v-if="menuVisible" @close="menuVisible = false" @finish="doSomething()" ></dropdown-menu> <!-- doSomething() 不会被执行-->
解决方法有两种
一种是将父组件中的 v-if 换成 v-show 以避免子组件销毁,另一种是延迟销毁,即父组件接收到以上示例的 close 事件时先不销毁子组件,接收到 finish 时再销毁。