Vue子组件离开过渡回调未触发：需保持组件解耦复用

这个问题我之前也碰到过！核心原因是：当父组件通过v-if被销毁时，Vue会同步卸载整个组件树，子组件的过渡钩子根本没机会触发——父组件都被移除了，子组件直接被清理掉，自然不会执行outro方法。

要解决这个问题，关键是让父组件的离开流程等待子组件的过渡完成，同时通过事件通信保持父子组件的解耦，不影响子组件的复用性。下面是具体实现步骤：

实现思路 #

1. 子组件内部维护自身的显示状态，通过自定义事件接收"触发离开"的信号，执行自身的outro逻辑，过渡完成后通知父组件。
2. 父组件在开始离开前，先触发子组件的过渡流程，等待子组件发送"过渡完成"的信号后，再完成自身的销毁。

修改后的示例代码 #

子组件（Child.vue） #

<template>
  <!-- 子组件自身的过渡包裹 -->
  <transition name="fade" @after-leave="notifyParentComplete">
    <div v-if="isVisible">子组件内容</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true // 子组件自身的显示状态
    }
  },
  methods: {
    outro() {
      // 子组件的离开回调逻辑
      console.log('子组件outro方法触发！')
      this.isVisible = false // 触发子组件的过渡
    },
    notifyParentComplete() {
      // 子组件过渡完成后，向父组件发送事件
      this.$emit('child-outro-done')
    }
  },
  mounted() {
    // 监听父组件的触发信号
    this.$on('trigger-child-outro', this.outro)
  },
  beforeDestroy() {
    // 清理事件监听，避免内存泄漏
    this.$off('trigger-child-outro', this.outro)
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

父组件（Parent.vue） #

<template>
  <!-- 父组件的过渡包裹，添加before-leave钩子控制离开流程 -->
  <transition name="slide" @before-leave="waitForChildOutro">
    <div v-if="isVisible">
      <!-- 绑定子组件的完成事件 -->
      <child ref="childComponent" @child-outro-done="onChildOutroDone"></child>
      父组件内容
    </div>
  </transition>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      isVisible: true,
      childOutroCompleted: false
    }
  },
  methods: {
    outro() {
      // 父组件的离开触发入口
      console.log('父组件outro方法触发！')
      this.isVisible = false // 触发父组件的过渡
    },
    waitForChildOutro() {
      // 暂停父组件的离开，先触发子组件的过渡
      this.childOutroCompleted = false
      this.$refs.childComponent.$emit('trigger-child-outro')
      
      // 返回Promise，等待子组件完成过渡后再继续父组件的离开
      return new Promise(resolve => {
        const checkCompletion = () => {
          if (this.childOutroCompleted) {
            resolve()
          } else {
            requestAnimationFrame(checkCompletion)
          }
        }
        checkCompletion()
      })
    },
    onChildOutroDone() {
      // 标记子组件过渡完成
      this.childOutroCompleted = true
    }
  }
}
</script>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter-from, .slide-leave-to {
  transform: translateX(100%);
}
</style>

根组件（App.vue） #

<template>
  <div id="app">
    <parent ref="parentComponent"></parent>
    <button @click="toggleContainer">切换显示</button>
  </div>
</template>

<script>
import Parent from './Parent.vue'

export default {
  components: { Parent },
  data() {
    return {
      showContainer: true
    }
  },
  methods: {
    toggleContainer() {
      if (this.showContainer) {
        // 触发父组件的离开流程
        this.$refs.parentComponent.outro()
      } else {
        // 重新显示父组件
        this.showContainer = true
        this.$refs.parentComponent.isVisible = true
      }
      this.showContainer = !this.showContainer
    }
  }
}
</script>

方案优势 #

• 完全解耦：父子组件通过自定义事件通信，子组件不需要知道父组件的存在，可在任何场景下复用。
• 过渡同步：父组件会等待子组件的过渡动画完全结束后，再执行自身的离开逻辑，保证整个销毁流程的连贯性。
• 内存安全：子组件在销毁前会清理事件监听，避免内存泄漏问题。

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