组件注册和使用
内置组件无需注册便可以直接在模板中使用。它们也支持 tree-shake:仅在使用时才会包含在构建中。
在渲染函数中使用它们时,需要显式导入。例如:
import { h, Transition } from 'vue'
h(Transition, {
/* props */
})
<Transition
>
为单个元素或组件提供动画过渡效果。
<TransitionGroup
>
为列表中的多个元素或组件提供过渡效果。
<KeepAlive
>
缓存包裹在其中的动态切换组件。
-
详细信息
<KeepAlive>
包裹动态组件时,会缓存不活跃的组件实例,而不是销毁它们。任何时候都只能有一个活跃组件实例作为
<KeepAlive>
的直接子节点。当一个组件在
<KeepAlive>
中被切换时,它的activated
和deactivated
生命周期钩子将被调用,用来替代mounted
和unmounted
。这适用于<KeepAlive>
的直接子节点及其所有子孙节点。
<Teleport
>
将其插槽内容渲染到 DOM 中的另一个位置。
<Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />