VueJs Transition不能用作动态组件 CustomTransition.Vue

问题描述

目标：

使用动态组件为 Vue V3 创建自定义的可重用过渡组件。
vue2-transitions npm软件包使用与下面相同的方法，并且不适用于v3，因此我决定为自己创建一个简单的方法。

CustomTransition.Vue

<component
  :is="group ? 'transition-group' : 'transition'"
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</component>

SomeOtherComponent.vue

<div>
  <custom-transition>
    <span v-if="show">This does not work.</span>
  </custom-transition>
</div>

这不起作用，我不知道为什么。 <transition>元素的呈现方式如下。

<transition
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
      <span>This does not work.</span>
</transition>

但是

当我这样重写CustomComponent.vue时。

<transition
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</transition>

工作正常。

编辑

我添加了一个JSFiddle，以防有人想尝试一下。

解决方法

最后从vue社区找到了解决方案。 link to working jsfiddle

要使此组件正常工作：

<component
  :is="group ? 'transition-group' : 'transition'"
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</component>

将Transition和TransitionGroup组件显式导入到组件中并注册它们。

import { Transition,TransitionGroup } from 'vue'

export default {
  components: {
    Transition,TransitionGroup,},data() {
    return { show: false };
  }
}

链接到vue-next存储库中的github issue。