Встроенные компоненты ​

import { h, Transition } from 'vue'  h(Transition, {  /* props */ })

<Transition> ​

Обеспечивает эффекты анимированного перехода одного элемента или компонента.

• Входные параметры

  ts

  interface TransitionProps {  /**  * Используется для автоматической генерации CSS-классов перехода.  * Например, `name: 'fade'` автоматически раскроется в `.fade-enter`,  * `.fade-enter-active` и т.д.  */  name?: string  /**  * Применять ли СSS-классы переходов.  * По умолчанию: true  */  css?: boolean  /**  * Указывает тип событий перехода, которые необходимо ждать   * для определения момента окончания перехода.  * По умолчанию автоматически выбирается тип с большей длительностью.  */  type?: 'transition' | 'animation'  /**  * Определяет длительность перехода.  * По умолчанию Vue ждёт первого события `transitionend`  * или `animationend` на корневом элементе.  */  duration?: number | { enter: number; leave: number }  /**  * Управляет последовательностью переходов исчезновения/появления.  * По умолчанию — одновременно.  */  mode?: 'in-out' | 'out-in' | 'default'  /**  * Применять ли переход при первоначальном рендере.  * По умолчанию: false  */  appear?: boolean   /**  * Параметры для настройки классов перехода.  * Используйте kebab-case в шаблонах, например 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">переключаемое содержимое</div> </Transition>

  Принудительный эффект перехода путем изменения атрибута key:

  template

  <Transition>  <div :key="text">{{ text }}</div> </Transition>

  Динамический компонент, используются параметры mode и appear:

  template

  <Transition name="fade" mode="out-in" appear>  <component :is="view"></component> </Transition>

  Прослушивание событий перехода:

  template

  <Transition @after-enter="onTransitionComplete">  <div v-show="ok">переключаемое содержимое</div> </Transition>

• См. также Руководство — Transition

<TransitionGroup> ​

Обеспечивает эффекты перехода для нескольких элементов или компонентов в списке.

• Входные параметры

  <TransitionGroup> принимает те же параметры, что и <Transition>, за исключением mode, плюс два дополнительных параметра:

  ts

  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {  /*  * Если не определен, то рендерится как fragment.  */  tag?: string  /**  * Для переопределения CSS-класса, применяемого во время анимаций перемещения.  * Используйте kebab-case в шаблонах, например 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 {  /**  * Если определено, то только компоненты с подходящими под  * `include` именами будут кэшированы.  */  include?: MatchPattern  /**  * Любой компонент с именем подходящим под `exclude`  * не будет кэшироваться.  */  exclude?: MatchPattern  /**  * Максимальное количество кэшируемых экземпляров компонентов.  */  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

  <!-- строка, с перечислением через запятую --> <KeepAlive include="a,b">  <component :is="view"></component> </KeepAlive>  <!-- регулярное выражение (используется `v-bind`) --> <KeepAlive :include="/a|b/">  <component :is="view"></component> </KeepAlive>  <!-- массив (используется `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 {  /**  * Обязательный. Задаёт целевой контейнер.  * Может быть селектором или непосредственно элементом.  */  to: string | HTMLElement  /**  * Если `true`, содержимое останется на своем первоначальном  * месте, вместо перемещения в целевой контейнер.  * Может изменяться динамически.  */  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>

  Defer target resolution :

  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. Он будет отображать содержимое #fallback слота во время рендеринга #default слота в памяти.

  Если он встречает асинхронные зависимости (Асинхронные компоненты и компоненты с async setup()) во время рендеринга #default слота, он будет ждать, пока все они не будут разрешены, прежде чем отобразить #default слот.

  Если установить для Suspense значение suspensible, вся обработка асинхронных зависимостей будет выполняться родительским Suspense. См. подробности реализации

• См. также Руководство — Suspense