Question

我试图找到vuejs方式来进行组件之间的转换，这将检查以下要求：

我希望所有组件始终存在于DOM中（因此，使用v-show）
我想将v-for用于DRY
我想控制过渡模式

我尝试了许多配置，但是都不满足我的需求。

我想到的配置很少：

此人不适用于v-show（需要过渡小组），也不使用v-for

<transition name="slide" mode="in-out">
    <Foo v-if="store.current == 'Foo' " key="Foo" ></Foo>
    <Bar v-if="store.current == 'Bar' " key="Bar" ></Bar>
    <FooBar v-if="store.current == 'FooBar' " key="'FooBar" ></FooBar>
</transition>

此人不允许mode，并且不使用v-for

<transition-group name="slide">
    <Foo v-show="store.current == 'Foo' " key="Foo" ></Foo>
    <Bar v-show="store.current == 'Bar' " key="Bar" ></Bar>
    <FooBar v-show="store.current == 'FooBar' " key="'FooBar" ></FooBar>
</transition-group>

此人也不允许mode（因为它是一个过渡组）

<transition-group name="slide">
    <component v-for="item in list" v-show="store.current == item" :is="item" :key="item"></component>
</transition-group>

v-for组件的过渡

0 个答案: