vue - 动态组件(:is在组件中的使用)
使用场景:
有些场景会需要在两个组件间来回切换,比如 Tab 界面:
我们可以通过 Vue 的 <component>
元素和特殊的 is
attribute 实现的:如
<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>
在上面的例子中,被传给:is
的值可以是以下几种:
- 被注册的组件名
- 导入的组件对象
你也可以使用is
attribute 来创建一般的 HTML 元素。
当使用 <component :is="...">
来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 <KeepAlive>
组件
强制被切换掉的组件仍然保持“存活”的状态。