內建元件

註冊和用法

內建元件可以直接在模板中使用，無需註冊。它們也是可搖樹的：只有在使用時才會包含在構建中。

當在渲染函式中使用時，需要顯式匯入。例如

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