内置组件

注册和用法

内置组件可以直接在模板中使用，无需注册。它们也是可摇树的：只有在使用时才会包含在构建中。

当在渲染函数中使用时，需要显式导入。例如

import { h, Transition } from 'vue'

h(Transition, {
  /* props */
})

`<Transition>`

为单个元素或组件提供动画过渡效果。

属性

interface 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，还增加了两个额外的属性

interface 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 属性配置）。如果当移动类应用时，CSS transform 属性是 "可过渡的"，则元素将通过使用 FLIP 技术平滑地动画化到其目的地。

示例

template

<TransitionGroup tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

另请参阅 指南 - TransitionGroup

`<KeepAlive>`

缓存动态切换的组件。

属性

interface 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 的另一部分。

属性

interface 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>`

用于在组件树中编排嵌套的异步依赖项。

属性

interface SuspenseProps {
  timeout?: string | number
  suspensible?: boolean
}

活动
- @resolve
- @pending
- @fallback
细节
<Suspense> 接受两个插槽：默认插槽 #default 和后备插槽 #fallback。它将在内存中渲染默认插槽时显示后备插槽的内容。
如果在渲染默认插槽时遇到异步依赖项（异步组件和具有 async setup() 的组件），它将等待所有这些依赖项都解析完毕后再显示默认插槽。
通过将 Suspense 设置为 suspensible，所有异步依赖项的处理将由父级 Suspense 处理。请参阅实现细节
另请参阅 指南 - Suspense

在 GitHub 上编辑此页面

内置组件 ​

<Transition> ​

<TransitionGroup> ​

<KeepAlive> ​

<Teleport> ​

<Suspense> ​

内置组件

`<Transition>`

`<TransitionGroup>`

`<KeepAlive>`

`<Teleport>`

`<Suspense>`