本文探讨了在Vue中如何使用`<component>`元素动态切换组件，并保持组件状态。通过`:is`属性实现v-if/v-else的效果，同时利用`keep-alive`包裹组件以保存操作痕迹。在切换组件时，确保每个组件有正确的name属性，以便在缓存中正确识别。这种方法在需要在不同组件间切换并保持用户交互状态的应用场景中非常有用。
<component
:is="true ? 'component1' : 'component2'"
:demodata="demodata"
@demoEvent="demoEvent"
></component>demoData可以只用于其中某一个组件，组件emit的方法可以都被监听到。
// 相当于用 v-if 和 v-else 切换两个组件
<component1
v-if="true"
@demoEvent="demoEvent"
></component1>
<component2
v-else
:demoData="demoData"
@demoEvent="demoEvent"
></component2>如果想要切换组件时保存上次的操作痕迹，可以在组件外包裹keep-alive，但要注意，此时两个组件的name要正确命名（这是一个好习惯）。
<keep-alive>
<component
:is="true ? 'component1' : 'component2'"
:demodata="demodata"
@demoEvent="demoEvent"
></component>
</keep-alive>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
