内置组件
注册和用法
内置组件可以直接在模板中使用,无需注册。它们也是可摇树的:只有在使用时才会包含在构建中。
当在 渲染函数中使用时,需要显式导入。例如
js
import { h, Transition } from 'vue'
h(Transition, {
/* props */
})
<Transition>
为单个元素或组件提供动画过渡效果。
属性
tsinterface TransitionProps { /** * Used to automatically generate transition CSS class names. * e.g. `name: 'fade'` will auto expand to `.fade-enter`, * `.fade-enter-active`, etc. */ name?: string /** * Whether to apply CSS transition classes. * Default: true */ css?: boolean /** * Specifies the type of transition events to wait for to * determine transition end timing. * Default behavior is auto detecting the type that has * longer duration. */ type?: 'transition' | 'animation' /** * Specifies explicit durations of the transition. * Default behavior is wait for the first `transitionend` * or `animationend` event on the root transition element. */ duration?: number | { enter: number; leave: number } /** * Controls the timing sequence of leaving/entering transitions. * Default behavior is simultaneous. */ mode?: 'in-out' | 'out-in' | 'default' /** * Whether to apply transition on initial render. * Default: false */ appear?: boolean /** * Props for customizing transition classes. * Use kebab-case in templates, e.g. enter-from-class="xxx" */ enterFromClass?: string enterActiveClass?: string enterToClass?: string appearFromClass?: string appearActiveClass?: string appearToClass?: string leaveFromClass?: string leaveActiveClass?: string leaveToClass?: string }
活动
@before-enter
@before-leave
@enter
@leave
@appear
@after-enter
@after-leave
@after-appear
@enter-cancelled
@leave-cancelled
(v-show
仅限)@appear-cancelled
示例
简单元素
template<Transition> <div v-if="ok">toggled content</div> </Transition>
通过更改
key
属性强制过渡template<Transition> <div :key="text">{{ text }}</div> </Transition>
动态组件,具有过渡模式 + 在出现时动画
template<Transition name="fade" mode="out-in" appear> <component :is="view"></component> </Transition>
监听过渡事件
template<Transition @after-enter="onTransitionComplete"> <div v-show="ok">toggled content</div> </Transition>
另请参阅 指南 - Transition
<TransitionGroup>
为列表中的多个元素或组件提供过渡效果。
属性
<TransitionGroup>
接受与<Transition>
相同的属性,除了mode
,还增加了两个额外的属性tsinterface TransitionGroupProps extends Omit<TransitionProps, 'mode'> { /** * If not defined, renders as a fragment. */ tag?: string /** * For customizing the CSS class applied during move transitions. * Use kebab-case in templates, e.g. move-class="xxx" */ moveClass?: string }
活动
<TransitionGroup>
触发与<Transition>
相同的事件。细节
默认情况下,
<TransitionGroup>
不会渲染包装DOM元素,但可以通过tag
属性定义一个。请注意,
<transition-group>
中的每个子元素都必须是 唯一键的,以便动画能正常工作。<TransitionGroup>
支持通过CSS转换移动过渡。当子元素在更新后屏幕上的位置发生变化时,它将获得一个移动CSS类(自动从name
属性生成或通过move-class
属性配置)。如果当移动类应用时,CSStransform
属性是 "可过渡的",则元素将通过使用 FLIP 技术平滑地动画化到其目的地。示例
template<TransitionGroup tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </TransitionGroup>
另请参阅 指南 - TransitionGroup
<KeepAlive>
缓存动态切换的组件。
属性
tsinterface KeepAliveProps { /** * If specified, only components with names matched by * `include` will be cached. */ include?: MatchPattern /** * Any component with a name matched by `exclude` will * not be cached. */ exclude?: MatchPattern /** * The maximum number of component instances to cache. */ max?: number | string } type MatchPattern = string | RegExp | (string | RegExp)[]
细节
当围绕动态组件包裹时,
<KeepAlive>
缓存不活动的组件实例而不销毁它们。在任何时候,
<KeepAlive>
的直接子代只能有一个活动组件实例。当组件在
<KeepAlive>
内切换时,其activated
和deactivated
生命周期钩子将被相应地调用,这为mounted
和unmounted
提供了替代方案,后者不会被调用。这适用于<KeepAlive>
的直接子元素以及所有其后代。示例
基本用法
template<KeepAlive> <component :is="view"></component> </KeepAlive>
当与
v-if
/v-else
分支一起使用时,每次只能渲染一个组件template<KeepAlive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </KeepAlive>
与
<Transition>
一起使用template<Transition> <KeepAlive> <component :is="view"></component> </KeepAlive> </Transition>
使用
include
/exclude
template<!-- comma-delimited string --> <KeepAlive include="a,b"> <component :is="view"></component> </KeepAlive> <!-- regex (use `v-bind`) --> <KeepAlive :include="/a|b/"> <component :is="view"></component> </KeepAlive> <!-- Array (use `v-bind`) --> <KeepAlive :include="['a', 'b']"> <component :is="view"></component> </KeepAlive>
与
max
一起使用template<KeepAlive :max="10"> <component :is="view"></component> </KeepAlive>
另请参阅 指南 - KeepAlive
<Teleport>
将插槽内容渲染到 DOM 的另一部分。
属性
tsinterface TeleportProps { /** * Required. Specify target container. * Can either be a selector or an actual element. */ to: string | HTMLElement /** * When `true`, the content will remain in its original * location instead of moved into the target container. * Can be changed dynamically. */ disabled?: boolean /** * When `true`, the Teleport will defer until other * parts of the application have been mounted before * resolving its target. (3.5+) */ defer?: boolean }
示例
指定目标容器
template<Teleport to="#some-id" /> <Teleport to=".some-class" /> <Teleport to="[data-teleport]" />
条件禁用
template<Teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </Teleport>
延迟目标解析
template<Teleport defer to="#late-div">...</Teleport> <!-- somewhere later in the template --> <div id="late-div"></div>
另请参阅 指南 - Teleport
<Suspense>
用于在组件树中编排嵌套的异步依赖项。
属性
tsinterface SuspenseProps { timeout?: string | number suspensible?: boolean }
活动
@resolve
@pending
@fallback
细节
<Suspense>
接受两个插槽:默认插槽#default
和后备插槽#fallback
。它将在内存中渲染默认插槽时显示后备插槽的内容。如果在渲染默认插槽时遇到异步依赖项(异步组件 和具有
async setup()
的组件),它将等待所有这些依赖项都解析完毕后再显示默认插槽。通过将 Suspense 设置为
suspensible
,所有异步依赖项的处理将由父级 Suspense 处理。请参阅 实现细节另请参阅 指南 - Suspense