跳转到内容

内置组件

注册和用法

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

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

js
import { h, Transition } from 'vue'

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

<Transition>

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

  • 属性

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

    ts
    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>

缓存动态切换的组件。

  • 属性

    ts
    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> 内切换时,其 activateddeactivated 生命周期钩子将被相应地调用,这为 mountedunmounted 提供了替代方案,后者不会被调用。这适用于 <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 的另一部分。

  • 属性

    ts
    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>

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

  • 属性

    ts
    interface SuspenseProps {
      timeout?: string | number
      suspensible?: boolean
    }
  • 活动

    • @resolve
    • @pending
    • @fallback
  • 细节

    <Suspense> 接受两个插槽:默认插槽 #default 和后备插槽 #fallback。它将在内存中渲染默认插槽时显示后备插槽的内容。

    如果在渲染默认插槽时遇到异步依赖项(异步组件 和具有 async setup() 的组件),它将等待所有这些依赖项都解析完毕后再显示默认插槽。

    通过将 Suspense 设置为 suspensible,所有异步依赖项的处理将由父级 Suspense 处理。请参阅 实现细节

  • 另请参阅 指南 - Suspense

内置组件已加载