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 ignorová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