VueJs转换未作为动态组件工作

Question

目标：

使用动态组件为Vue V3创建自定义的可重用转换组件
vue2-transitionsnpm包使用与下面相同的方法，但它不适用于v3，所以我决定为自己做一个简单的方法。

CustomTransition.Vue

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

其他组件.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，以防有人想尝试一下。

Answer 1

终于从vue社区找到了解决方案。链接到正在工作的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问题。