Vue.js

Appearance

On this page

Componentes Integrados ​

Registración y Uso

Los componentes integrados pueden ser usados directamente en las plantillas sin necesidad de registrarlos. Cabe destacar que solo se incluyen en el build cuando son usados.

Cuando se usan en funciones de renderizado, necesitan ser importados explícitamente. Por ejemplo:

js
import { h, Transition } from 'vue'

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

<Transition> ​

Proporciona efectos de transición animados a un solo elemento o componente.

  • Props

    ts
    interface TransitionProps {
  /**
   * Usado para generar en forma automática nombres de clases de transición CSS.
   * ej. `name: 'fade'` generará las clases `.fade-enter`,
   * `.fade-enter-active`, etc.
   */
  name?: string
  /**
   * Si aplicar las clases de transición CSS.
   * Valor por defecto: true
   */
  css?: boolean
  /**
   * Especifica el tipo de eventos de transición que se debe esperar
   * para determinar el tiempo de finalización de la transición.
   * El comportamiento por defecto es auto detectar el tipo que tenga
   * la mayor duración.
   */
  type?: 'transition' | 'animation'
  /**
   * Especifica en forma explicita la duración de la transición.
   * El comportamiento por defecto es esperar el primer evento `transitionend`
   * o `animationend` en la raiz del elemento de transición.
   */
  duration?: number | { enter: number; leave: number }
  /**
   * Controla la secuencia temporal de las transiciones de salida/entrada.
   * El comportamiento por defecto es en simultáneo.
   */
  mode?: 'in-out' | 'out-in' | 'default'
  /**
   * Si aplicar la transición en el renderizado inicial.
   * Valor por defecto: false
   */
  appear?: boolean

  /**
   * Propiedades para personalizar las clases de transición.
   * Usar la notación kebab-case en las plantillas, ej. enter-from-class="xxx"
   */
  enterFromClass?: string
  enterActiveClass?: string
  enterToClass?: string
  appearFromClass?: string
  appearActiveClass?: string
  appearToClass?: string
  leaveFromClass?: string
  leaveActiveClass?: string
  leaveToClass?: string
}

  • Eventos

    • @before-enter
    • @before-leave
    • @enter
    • @leave
    • @appear
    • @after-enter
    • @after-leave
    • @after-appear
    • @enter-cancelled
    • @leave-cancelled (solo con v-show)
    • @appear-cancelled

  • Ejemplo

    Elemento simple:

    template
    <Transition>
  <div v-if="ok">contenido a mostrar</div>
</Transition>

    Forzar una transición cambiando el atributo key:

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

    Componente dinámico, con modo de transición + animación al inicio:

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

    Escuchando a los eventos de transición:

    template
    <Transition @after-enter="onTransitionComplete">
  <div v-show="ok">contenido a mostrar</div>
</Transition>

  • Véase también Guía - Transition

<TransitionGroup> ​

Proporciona efectos de transición para múltiples elementos o componentes en una lista.

  • Props

    <TransitionGroup> acepta las mismas props que <Transition> excepto mode, más dos props adicionales:

    ts
    interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
  /**
   * Si no está definido, se renderiza como un fragmento.
   */
  tag?: string
  /**
   * Para customizar las clases CSS aplicadas durante las transiciones de movimiento.
   * Usar la notación kebab-case en las plantillas, ej. move-class="xxx"
   */
  moveClass?: string
}

  • Eventos

    <TransitionGroup> emite los mismos eventos que <Transition>.

  • Detalles

    Por defecto, <TransitionGroup> no renderiza un elemento del DOM contenedor, pero se puede definir uno mendiante la prop tag.

    Ten en cuenta que cada hijo en un <transition-group> debe estar con una única key para que la animación funciones correctamente.

    <TransitionGroup> soporta transiciones de movimiento mediante la propiedad CSS transform. Cuando la posición de un hijo en la pantalla es cambiada luego de una actualización de estado, se le aplicará una clase CSS de movimiento (auto generada a partir del atributo name o configurara con la prop move-class). Si la propiedad CSS transform admite animaciones cuando la clase de movimiento sea aplicada, el elemento se animará suavemente hasta su destino usando la técnica FLIP.

  • Ejemplo

    template
    <TransitionGroup tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

  • Véase también Guía - TransitionGroup

<KeepAlive> ​

Almacena los componentes que alternan dinámicamente en su interior.

  • Props

    ts
    interface KeepAliveProps {
  /**
   * Si se especifica, solo los componentes cuyos nombres
   * coinciden con `include` serán almacenados.
   */
  include?: MatchPattern
  /**
   * Cualquier componente cuyo nombre coincida con `exclude`
   * no será almacenado.
   */
  exclude?: MatchPattern
  /**
   * El número máximo de instancias de componentes a almacenar.
   */
  max?: number | string
}

type MatchPattern = string | RegExp | (string | RegExp)[]

  • Detalles

    Cuando se envuelve en un componente dinámico, <KeepAlive> almacena en caché las instancias del componente inactivo sin destruirlas.

    Sólo puede haber una instancia de componente activo como hijo directo de <KeepAlive> en cualquier momento.

    Cuando un componente se activa dentro de <KeepAlive>, sus hooks de ciclo de vida activated y deactivated serán invocados en consecuencia, proporcionando una alternativa a mounted y unmounted, que no son llamados. Esto se aplica al hijo directo de <KeepAlive> así como a todos sus descendientes.

  • Ejemplo

    Uso básico:

    template
    <KeepAlive>
  <component :is="view"></component>
</KeepAlive>

    Cuando se utiliza con v-if / v-else, debe haber sólo un componente renderizado a la vez:

    template
    <KeepAlive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</KeepAlive>

    Usado junto a <Transition>:

    template
    <Transition>
  <KeepAlive>
    <component :is="view"></component>
  </KeepAlive>
</Transition>

    Usando include / exclude:

    template
    <!-- cadena de texto delimitada por coma -->
<KeepAlive include="a,b">
  <component :is="view"></component>
</KeepAlive>

<!-- expresión regular (usar `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view"></component>
</KeepAlive>

<!-- Array (usar `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view"></component>
</KeepAlive>

    Uso con max:

    template
    <KeepAlive :max="10">
  <component :is="view"></component>
</KeepAlive>

  • Véase también Guía - KeepAlive

<Teleport> ​

Renderiza su contenido en otra parte del DOM.

  • Props

    ts
    interface TeleportProps {
  /**
   * Requerida. Especifica el contenedor de destino.
   * Puede ser un selector o un elemento HTML.
   */
  to: string | HTMLElement
  /**
   * Si es `true`, el contenido permanecerá en su posición
   * original en lugar de ser movido al contenedor de destino.
   * Puede ser cambiado en forma dinámica.
   */
  disabled?: boolean
}

  • Ejemplo

    Especificando el contenedor de destino:

    template
    <Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />

    Deshabilitándolo en forma condicional:

    template
    <Teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</Teleport>

  • Véase también Guía - Teleport

<Suspense> ​

Se utiliza para orquestar dependencias asíncronas anidadas en un árbol de componentes.

  • Props

    ts
    interface SuspenseProps {
  timeout?: string | number
}

  • Eventos

    • @resolve
    • @pending
    • @fallback

  • Detalles

    <Suspense> acepta dos slots: el slot #default y el slot #fallback. Mostrará el contenido del slot fallback mientras renderiza el slot por defecto en la memoria.

    Si encuentra dependencias asíncronas (Componentes Asincrónicos y componentes con async setup()) mientras se muestra el slot por defecto, esperará hasta que todas ellas se resuelvan antes de mostrar el slot por defecto.

  • Véase también Guía - Suspense

Editar esta página en GitHub