Vestavěné speciální elementy ​

<component> ​

„Meta komponenta“ pro vykreslování dynamických komponent nebo elementů.

• Props

  ts

  interface DynamicComponentProps {
    is: string | Component
  }

• Podrobnosti

  Skutečná komponenta k vykreslení je určena vlastností is.

  • Když je is řetězec, může to být buď název HTML tagu nebo zaregistrovaný název komponenty.

  • Alternativně může být is vázán přímo na definici komponenty.

• Příklad

  Vykreslování komponent podle zaregistrovaného názvu (Options API):

  vue

  <script>
  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  
  export default {
    components: { Foo, Bar },
    data() {
      return {
        view: 'Foo'
      }
    }
  }
  </script>
  
  <template>
    <component :is="view" />
  </template>

  Vykreslování komponent podle definice (Composition API se <script setup>):

  vue

  <script setup>
  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  </script>
  
  <template>
    <component :is="Math.random() > 0.5 ? Foo : Bar" />
  </template>

  Vykreslování HTML elementů:

  template

  <component :is="href ? 'a' : 'span'"></component>

  Do is lze předat všechny vestavěné komponenty, ale musíte je zaregistrovat, pokud je chcete předávat jménem. Například:

  vue

  <script>
  import { Transition, TransitionGroup } from 'vue'
  
  export default {
    components: {
      Transition,
      TransitionGroup
    }
  }
  </script>
  
  <template>
    <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
      ...
    </component>
  </template>

  Registrace není vyžadována, pokud do is místo jejího názvu předáte samotnou komponentu, např. ve <script setup>.

  Pokud je na tagu <component> použit v-model, kompilátor šablony jej transformuje na vlastnost (prop) modelValue a event listener update:modelValue, podobně jako by to udělal pro jakoukoli jinou komponentu. Není to však kompatibilní s nativními HTML elementy, jako jsou <input> nebo <select>. Kvůli tomu nebude použití v-model s dynamicky vytvořeným nativním elementem fungovat:

  vue

  <script setup>
  import { ref } from 'vue'
  
  const tag = ref('input')
  const username = ref('')
  </script>
  
  <template>
    <!-- Toto nebude fungovat, protože 'input' je nativní HTML element -->
    <component :is="tag" v-model="username" />
  </template>

  V praxi se tento okrajový případ běžně nevyskytuje, protože nativní formulářová pole jsou ve skutečných aplikacích obvykle obalena komponentami. Pokud však skutečně potřebujete použít nativní element přímo, můžete v-model ručně rozdělit na atribut a událost.

• Viz také: Dynamické komponenty

<slot> ​

Určuje prostor pro vložený obsah uvnitř šablon.

• Props

  ts

  interface SlotProps {
    /**
     * Jakékoli vlastnosti předané do <slot> budou předány jako parametry
     * pro scoped sloty
     */
    [key: string]: any
    /**
     * Rezervováno pro specifikaci jména slotu.
     */
    name?: string
  }

• Podrobnosti

  Element <slot> může použít atribut name k určení jména slotu. Pokud není specifikováno žádné jméno, bude vykreslen výchozí (default) slot. Další atributy předané do elementu slotu budou předány jako vlastnosti (props) scoped slotu definovaného v rodičovské komponentě.

  Samotný element bude nahrazen obsahem odpovídajícího slotu.

  <slot> elementy ve Vue šablonách jsou kompilovány do JavaScriptu, aby nedocházelo k jejich záměně s nativními <slot> elementy.

• Viz také: Průvodce - Sloty

<template> ​

Tag <template> se používá jako placeholder, když chceme použít vestavěnou direktivu, aniž bychom vykreslovali element v DOM.

• Podrobnosti

  Speciální obsluha je pro <template> spuštěna pouze tehdy, pokud je tag použit spolu s jednou z těchto direktiv:

  • v-if, v-else-if nebo v-else
  • v-for
  • v-slot

  Pokud žádná z těchto direktiv přítomna není, bude vykreslen jako nativní <template> element.

  <template> s v-for může mít také atribut key. Všechny ostatní atributy a direktivy budou igorovány, protože nemají bez odpovídajícího prvku význam.

  Single-file komponenty (SFC) používají tag <template> nejvyšší úrovně k obalení celé šablony. Tento způsob použití je oddělen od použití <template> popsaného výše. Tento tag nejvyšší úrovně není součástí samotné šablony a nepodporuje syntaxi šablony, jako jsou direktivy.

• Viz také:

  • Průvodce - v-if na <template>
  • Průvodce - v-for nad <template>
  • Průvodce - Pojmenované sloty