Vue 2 this.$emit 方法无效问题的解决

分享一个 Vue 2 $emit 不生效问题的解决，子组件向父组件 $emit 事件，没有报错，但父组件就是收不到事件。首先排除拼错事件名称等基本错误。

最终发现原因是：由于我将 $emit 写在了异步方法里，子组件在还没 $emit 之前就销毁了，此时再调用 $emit 不会有任何报错，也不会有任何效果，特此记录。

子组件

// 这是一个菜单组件，假设某个菜单项被点击
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 时再销毁。

后记：如果 Vue 能在 “调用已销毁组件的 emit 方法” 时打印一个警告，这个问题就更容易被发现了。