转换的钩子一旦被销毁并回调就会产生问题答案

【问题标题】：Transition's hook creates issue once destroyed and called back转换的钩子一旦被销毁并回调就会产生问题
【发布时间】：2018-10-22 04:19:24
【问题描述】：

我有一个父组件和子组件，在子组件中我有一个 <transition> 定义如下：

<template lang="pug">
  div
    transition(name="fade-transition" mode="out-in" v-on:after-enter="fnAfterEnter")
      h1(v-if"someCondition") lorem ipsum
</template>

<script>
  export default {
    methods: {
      fnAfterEnter () {
        do something here...
      }
    }
  }
</script>

问题是，在父组件中，我有一些函数可以使用简单的v-if 条件挂载和销毁子组件。第一次挂载子组件时一切正常，但一旦销毁并再次挂载<transition>，所有钩子（不仅仅是v-on:after-enter）都不会触发方法fnAfterEnter。

提前致谢:)

【问题讨论】：

您能否详细说明预期的行为以及您实际看到的行为？您提供的描述很难按原样理解。
@B.Fleming 我自己解决了这个问题，发布了解决方案，请看看。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我发现问题是：子组件的转换没有完成，我在父组件中运行了一些函数来使子组件的转换项条件true而不使用$nextTick，但现在我确实喜欢下面的代码和问题已解决。

<script>
  export default {
    methods: {
      someFnInParent () {
        this.$nextTick(() => {
          this.$refs.childComp.someCondition = true
        })
      }
    }
  }
</script>

所以，this.$nextTick(() => {}) 帮助了我 :)

【讨论】：