时间戳

首页 > 解决方案 > 转换的钩子一旦被销毁并回调就会产生问题

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

问题描述

我有一个父组件和子组件，在子组件中我有一个<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。

提前致谢 ：）

标签： javascriptvue.jsvuejs2vue-component

解决方案

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

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

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

推荐阅读