TransitionGroup example
<TransitionGroup tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </TransitionGroup>
tutorial/component-basics
80 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
KeepAlive caches dynamically toggled components
The <KeepAlive> component caches dynamically toggled components wrapped inside without destroying them. When wrapped around a dynamic component, it preserves the component state.
KeepAlive props: include, exclude, max
KeepAlive accepts props: include (MatchPattern, if specified only components with names matched by include will be cached), exclude (MatchPattern, any component with a name matched by exclude will not be cached), max (number | string, the maximum number of component instances to cache). MatchPattern is string | RegExp | (string | RegExp)[].
KeepAlive allows only one active child
There can only be one active component instance as the direct child of KeepAlive at any time.
KeepAlive invokes activated and deactivated lifecycle hooks
When a component is toggled inside KeepAlive, its activated and deactivated lifecycle hooks will be invoked accordingly, providing an alternative to mounted and unmounted, which are not called. This applies to the direct child of KeepAlive as well as to all of its descendants.
KeepAlive basic example
<KeepAlive> <component :is="view"></component> </KeepAlive>
KeepAlive with v-if v-else
<KeepAlive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </KeepAlive>
KeepAlive with Transition
<Transition> <KeepAlive> <component :is="view"></component> </KeepAlive> </Transition>
KeepAlive include with comma-delimited string
<!-- comma-delimited string --> <KeepAlive include="a,b"> <component :is="view"></component> </KeepAlive>
KeepAlive include with array
<!-- Array (use `v-bind`) --> <KeepAlive :include="['a', 'b']"> <component :is="view"></component> </KeepAlive>
KeepAlive with max prop
<KeepAlive :max="10"> <component :is="view"></component> </KeepAlive>
Teleport renders slot content to another part of DOM
The <Teleport> component renders its slot content to another part of the DOM, allowing you to move template content outside of the current component hierarchy.
Teleport props: to, disabled, defer
Teleport accepts props: to (string | HTMLElement, required, specifies target container, can be a selector or actual element), disabled (boolean, when true content remains in original location instead of moving to target, can be changed dynamically), defer (boolean, when true available in 3.5+, Teleport defers until other parts of application have been mounted before resolving its target).
Teleport examples with selectors
<Teleport to="#some-id" /> <Teleport to=".some-class" /> <Teleport to="[data-teleport]" />
Teleport conditionally disabled
<Teleport to="#popup" :disabled="displayVideoInline"> <video src="./my-movie.mp4"> </Teleport>
Teleport defer target resolution
<Teleport defer to="#late-div">...</Teleport> <!-- somewhere later in the template --> <div id="late-div"></div>
Suspense for orchestrating async dependencies
The <Suspense> component is used for orchestrating nested async dependencies in a component tree. It is experimental.
Suspense props: timeout, suspensible
Suspense accepts props: timeout (string | number), suspensible (boolean, when true all async dependency handling is handled by parent Suspense).
Suspense events
Suspense emits events: @resolve, @pending, @fallback.
Suspense slots: default and fallback
Suspense accepts two slots: the #default slot and the #fallback slot. It will display the content of the fallback slot while rendering the default slot in memory. When it encounters async dependencies (Async Components and components with async setup()), it will wait until all are resolved before displaying the default slot.