Vue 3 带有子项的转换组件<slot>抛出错误

Question

我创建了一个自定义组件，它允许我应用渐变转换，而不必总是编写<transition>组件：

<transition
mode="out-in"
enter-active-class="transition-opacity ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition-opacity ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<slot />
</transition>

但当我在类似的地方使用它时

<FadingTransition>
<div v-show="!isSearchFocused">
...
</div>
</FadingTransition>

我得到以下错误：

[Vue warn]: Hydration node mismatch:
- Client vnode: div 
- Server rendered DOM: <!--[--> (start of fragment) 
at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
at <Transition mode="out-in" enter-active-class="transition-opacity ease-out duration-75" enter-from-class="opacity-0"  ... > 
at <FadingTransition> 
at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
at <Transition mode="out-in" enter-active-class="ease-out duration-75" enter-from-class="transform -translate-y-1 opacity-0"  ... > 
at <SearchBar> 
at <Header> 
at <App>
Hydration completed but contains mismatches.

我该怎么修？

Answer 1

不能肯定，但在自己的组件中使用它可能会有问题？您可以尝试使用<transition name="fadingtransition">，然后将转换样式存储在一个单独的CSS文件中。