Вбудовані компоненти
Реєстрація та використання
Вбудовані компоненти можна використовувати безпосередньо в шаблонах без необхідності реєстрації. Вони також підтримують струшування дерева: вони включаються в збірку лише тоді, коли використовуються.
При їх використанні в функціях рендерингу, їх потрібно імпортувати явно. Наприклад:
js
import { h, Transition } from 'vue'
h(Transition, {
/* реквізити */
})
<Transition>
Забезпечує анімовані ефекти переходу для окремого елемента або компонента.
Реквізити
tsinterface TransitionProps { /** * Використовується для автоматичної генерації назв класів переходу CSS. * напр. `name: 'fade'` буде автоматично розширено до `.fade-enter`, * `.fade-enter-active`, тощо. */ name?: string /** * Чи застосовувати класи переходу CSS. * За промовчанням: true */ css?: boolean /** * Визначає тип подій переходу, на які потрібно чекати щоб * визначити час закінчення переходу. * Тип за промовчанням автоматично визначає тип, який має * більшу тривалість. */ type?: 'transition' | 'animation' /** * Визначає явну тривалість переходу. * За промовчанням чекає першої `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>
Динамічний компонент з увімкненим режимом переходу + анімацією:
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
, а також дві додаткові властивості:tsinterface TransitionGroupProps extends Omit<TransitionProps, 'mode'> { /** * Якщо не визначено, відрендериться як фрагмент. */ tag?: string /** * Для налаштування класу CSS, застосованого під час переходів переміщення. * Використовуйте kebab-case в шаблонах, напр. move-class="xxx" */ moveClass?: string }
Події
<TransitionGroup>
випромінює ті самі події, що<Transition>
.Подробиці
За промовчанням
<TransitionGroup>
не рендерить DOM-елемент обгортки, але його можна визначити за допомогою властивостіtag
.Зауважте, що кожен дочірній елемент у
<transition-group>
повинен мати унікальний ключ, щоб анімації працювали належним чином.<TransitionGroup>
підтримує переходи з переміщеннями за допомогою CSS transform. Якщо позиція дочірнього елемента на екрані змінилася після оновлення, до нього буде застосовано 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 { /** * Тільки компоненти з іменами, що збігаються, з * `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> <!-- regex (використання `v-bind`) --> <KeepAlive :include="/a|b/"> <component :is="view"></component> </KeepAlive> <!-- Array (використання `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 { /** * Обов'язковий вхідний реквізит. Визначиний цільовий контейнер. * Може бути селектором або фактичним елементом. */ to: string | HTMLElement /** * Якщо `true`, вміст залишиться в оригінальному вигляді * розташування замість переміщення в цільовий контейнер. * Можна динамічно змінювати. */ disabled?: 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>
Також до вашої уваги: Гід - Teleport
<Suspense>
Використовується для управління вкладених асинхронних залежностей у дереві компонентів.
Реквізити
tsinterface SuspenseProps { timeout?: string | number }
Події
@resolve
@pending
@fallback
Подробиці
<Suspense>
приймає два слоти:#default
слот і#fallback
слот. Він показуватиме вміст#fallback
слота під час рендерингу слота за промовчанням у пам’яті.Якщо він зустрічає асинхронні залежності (Асинхронні компоненти й компоненти з
async setup()
) під час рендерингу слота за промовчанням, він чекатиме, доки всі вони будуть вирішені, перш ніж показати слот за промовчанням.Також до вашої уваги: Гід - Suspense