Základy komponent ​

Komponenty nám umožňují rozdělit UI na nezávislé a znovupoužitelné části a přemýšlet o každé části samostatně. Je běžné, že je aplikace organizována do stromu vnořených komponent:

Je to velmi podobné tomu, jak vnořujeme nativní HTML elementy, ale Vue implementuje svůj vlastní model komponent, který nám umožňuje zapouzdřit do každé komponenty její vlastní obsah a logiku. Vue také dobře funguje s nativními Web Components. Pokud vás zajímá vztah mezi Vue komponentami a Web Components, přečtěte si více zde.

Definice komponenty ​

Při použití build fáze obvykle definujeme každou Vue komponentu ve vyhrazeném souboru pomocí přípony .vue – známém jako Single-File komponenta (zkráceně SFC):

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Klikli jste na mě {{ count }} krát.</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Klikli jste na mě {{ count }} krát.</button>
</template>

Když nepoužíváte build fázi, lze Vue komponentu definovat jako prostý JavaScript objekt obsahující vlastnosti specifické pro Vue:

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      Klikli jste na mě {{ count }} krát.
    </button>`
}

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      Klikli jste na mě {{ count }} krát.
    </button>`
  // může také adresovat in-DOM šablonu
  // template: '#my-template-element'
}

Šablona je zde vložena inline jako JavaScript string, který Vue za běhu zkompiluje. Můžete také použít ID selektor ukazující na element (obvykle nativní <template> elementy) – Vue použije jeho obsah jako zdroj pro šablonu.

Výše uvedený příklad definuje jednu komponentu a exportuje ji jako default export souboru .js. Můžete však použít pojmenované exporty (named exports) k exportu více komponent ze stejného souboru.

Použití komponenty ​

Abychom mohli použít komponentu potomka, musíme ji do komponenty rodiče importovat. Za předpokladu, že jsme naši komponentu „counter“ tlačítka umístili do souboru s názvem ButtonCounter.vue, bude tato komponenta vystavena jako default export souboru:

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>Zde je komponenta potomka!</h1>
  <ButtonCounter />
</template>

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Zde je komponenta potomka!</h1>
  <ButtonCounter />
</template>

Je také možné zaregistrovat komponentu globálně a zpřístupnit ji všem komponentám v dané aplikaci, aniž byste ji museli importovat. Klady a zápory globální vs. lokální registrace jsou rozebírány ve vyhrazené části Registrace komponent.

Komponenty lze použít opakovaně, kolikrát budete chtít:

<h1>Zde jsou komponenty potomků!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />

Všimněte si, že při kliknutí na tlačítka si každé z nich zachovává svůj vlastní, samostatný count. Je to proto, že pokaždé, když komponentu použijete, vytvoří se nová instance.

V SFC se pro názvy tagů podřízených komponent doporučuje používat PascalCase, aby se odlišily od nativních HTML elementů. Přestože nativní názvy HTML elementů malá a velká písmena nerozlišují, Vue SFC je kompilovaný formát, takže v něm názvy rozlišující malá a velká písmena používat můžete. K uzavření tagu můžeme také použít />.

Pokud vaše šablony vytváříte přímo v DOM (např. jako obsah nativního elementu <template>), bude šablona při analýze HTML podléhat nativnímu chování prohlížeče. V takových případech budete muset pro názvy komponent použít kebab-case a explicitní uzavírací tagy:

<!-- pokud je šablona napsaná v DOM -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

Pro více detailů se podívejte na upozornění na omezení při analýze in-DOM šablon.

Předávání vlastností (props) ​

Pokud vytváříme blog, budeme pravděpodobně potřebovat komponentu představující příspěvek na blogu. Chceme, aby všechny příspěvky sdílely stejné vizuální rozvržení, ale s jiným obsahem. Taková komponenta nebude užitečná, pokud jí nebudete moci předat data, jako je název a obsah konkrétního příspěvku, který chceme zobrazit. Zde přicházejí na řadu vlastnosti (props).

Props jsou vlastní atributy, kter�� můžete na komponentě zaregistrovat. Abychom naší komponentě předali název blogového příspěvku, musíme jej deklarovat v seznamu vlastností, které tato komponenta přijímá, pomocí možnosti propsmakra defineProps:

<script>
export default {
  props: ['titulek']
}
</script>

<template>
  <h4>{{ titulek }}</h4>
</template>

<script setup>
defineProps(['titulek'])
</script>

<template>
  <h4>{{ titulek }}</h4>
</template>

const props = defineProps(['titulek'])
console.log(props.titulek)

export default {
  props: ['titulek'],
  setup(props) {
    console.log(props.titulek)
  }
}

Komponenta může mít tolik props, kolik chcete, a ve výchozím nastavení lze libovolné z nich předat libovolnou hodnotu.

Jakmile je vlastnost zaregistrována, můžete jí předávat data skrz vlastní atribut, například takto:

<BlogPost titulek="Moje cesta k Vue" />
<BlogPost titulek="Blogování s Vue" />
<BlogPost titulek="Proč je Vue tak zábavné" />

V typické aplikaci však pravděpodobně budete mít v komponentě rodiče pole příspěvků:

export default {
  // ...
  data() {
    return {
      posts: [
        { id: 1, titulek: 'Moje cesta k Vue' },
        { id: 2, titulek: 'Blogování s Vue' },
        { id: 3, titulek: 'Proč je Vue tak zábavné' }
      ]
    }
  }
}

const posts = ref([
  { id: 1, titulek: 'Moje cesta k Vue' },
  { id: 2, titulek: 'Blogování s Vue' },
  { id: 3, titulek: 'Proč je Vue tak zábavné' }
])

A potom pro každý z nich vykreslit jeho vlastní komponentu pomocí v-for:

<BlogPost
  v-for="post in posts"
  :key="post.id"
  :titulek="post.titulek"
 />

Všimněte si, jak je k předávání dynamických prop hodnot použitá zkrácená v-bind syntaxe (:titulek="post.titulek"). To je užitečné zejména tehdy, když předem přesně nevíte, jaký obsah se chystáte vykreslit.

To je zatím vše, co o vlastnostech (props) potřebujete vědět. Poté, co si přečtete tuto stránku a budete se s jejím obsahem cítit seznámeni, však doporučujeme později se vrátit a přečíst si úplného průvodce pro Vlastnosti (Props).

Naslouchání událostem (events) ​

Jak vyvíjíme naši komponentu <BlogPost>, některé funkce mohou vyžadovat zpětnou komunikaci do komponenty rodiče. Můžeme se například rozhodnout zahrnout funkci usnadnění pro zvětšení textu blogových příspěvků, zatímco zbytek stránky ponecháme ve výchozí velikosti.

V komponentě rodiče můžeme tuto funkci podporovat přidáním proměnné postFontSize v možnosti dataref hodnoty postFontSize:

data() {
  return {
    posts: [
      /* ... */
    ],
    postFontSize: 1
  }
}

const posts = ref([
  /* ... */
])

const postFontSize = ref(1)

Která může být použita v šabloně k ovládání velikosti písma všech blogových příspěvků:

<div :style="{ fontSize: postFontSize + 'em' }">
  <BlogPost
    v-for="post in posts"
    :key="post.id"
    :titulek="post.titulek"
   />
</div>

Nyní pojďme přidat tlačítko do šablony <BlogPost> komponenty:

<!-- sekce <script> vynechána -->
<template>
  <div class="blog-post">
    <h4>{{ titulek }}</h4>
    <button>Zvětšit text</button>
  </div>
</template>

Tlačítko zatím nic nedělá – chceme kliknutím na tlačítko sdělit komponentě rodiče, že má zvětšit text všech příspěvků. K vyřešení tohoto problému poskytují komponenty vlastní systém událostí (events). Rodič se může rozhodnout poslouchat libovolnou událost na instanci komponenty potomka pomocí v-on nebo @, stejně jako bychom to dělali s nativní událostí DOM:

<BlogPost
  ...
  @zvetsit-text="postFontSize += 0.1"
 />

Potom může komponenta potomka vyvolat událost sama na sobě voláním vestavěné metody $emit a předáním názvu události:

<!-- sekce <script> vynechána -->
<template>
  <div class="blog-post">
    <h4>{{ titulek }}</h4>
    <button @click="$emit('zvetsit-text')">Zvětšit text</button>
  </div>
</template>

Díky event listeneru @zvetsit-text="postFontSize += 0.1" obdrží komponenta rodiče volání a provede aktualizaci hodnoty postFontSize.

Vysílané (emit) události můžeme nepovinně deklarovat s pomocí možnosti emitsmakra defineEmits:

<script>
export default {
  props: ['titulek'],
  emits: ['zvetsit-text']
}
</script>

<script setup>
defineProps(['titulek'])
defineEmits(['zvetsit-text'])
</script>

To dokumentuje všechny události, které komponenta vysílá, a volitelně je validuje. Také to Vue umožňuje vyhnout se jejich implicitnímu použití jako nativních event listenerů na root elementu komponenty potomka.

<script setup>
const emit = defineEmits(['zvetsit-text'])

emit('zvetsit-text')
</script>

export default {
  emits: ['zvetsit-text'],
  setup(props, ctx) {
    ctx.emit('zvetsit-text')
  }
}

To je zatím vše, co potřebujete vědět o vlastních událostech komponenty. Poté, co si přečtete tuto stránku a budete se s jejím obsahem cítit seznámeni, však doporučujeme později se vrátit a přečíst si úplného průvodce pro Události komponent (Events).

Distribuce obsahu pomocí slotů (slots) ​

Stejně jako u HTML elementů je často užitečné mít možnost předat obsah komponentě, jako je tato:

<AlertBox>
  Stala se chyba.
</AlertBox>

Což by mohlo vykreslit něco jako:

Toho lze dosáhnout použitím speciálního Vue elementu <slot>:

<template>
  <div class="alert-box">
    <strong>Toto je chyba pro testovací účely</strong>
    <slot />
  </div>
</template>

<style scoped>
.alert-box {
  /* ... */
}
</style>

Jak vidíte výše, používáme <slot> jako zástupný symbol v místě, kde chceme umístit obsah – a to je vše. Máme hotovo!

To je zatím vše, co potřebujete vědět o slotech. Poté, co si přečtete tuto stránku a budete se s jejím obsahem cítit seznámeni, však doporučujeme později se vrátit a přečíst si úplného průvodce pro Sloty (Slots).

Dynamické komponenty ​

Někdy je užitečné mezi komponentami dynamicky přepínat, například v rozhraní s více taby:

Výše uvedené je možné s použitím Vue elementu <component> a jeho speciálního atributu is:

<!-- Komponenta se změní, když se změní `currentTab` -->
<component :is="currentTab"></component>

<!-- Komponenta se změní, když se změní `currentTab` -->
<component :is="tabs[currentTab]"></component>

V předchozím příkladu může hodnota předávaná do :is obsahovat:

• string se jménem registrované komponenty, NEBO
• vlastní importovaný objekt komponenty

Atribut is můžete také použít pro vytváření běžných HTML elementů.

Při přepínání mezi více komponentami pomocí <component :is="..."> bude komponenta odpojena (unmounted), když je z ní přepnuto jinam. Neaktivní komponenty můžete donutit, aby zůstaly „naživu“ pomocí vestavěné komponenty <KeepAlive>.

Omezení při parsování in-DOM šablon ​

Pokud píšete své Vue šablony přímo v DOM, Vue bude muset definici šablony (string template) z DOM načíst. To vede k určitým omezením kvůli chování prohlížečů při nativní analýze HTML.

Necitlivost na malá a velká písmena ​

HTML tagy a názvy atributů nerozlišují velká a malá písmena, takže prohlížeče budou všechna velká písmena interpretovat jako malá. To znamená, že když používáte in-DOM šablony, PascalCase názvy komponent a camelCased názvy vlastností (props) nebo názvy v-on událostí (events), musí všechny používat jejich ekvivalenty ve formátu kebab-case (oddělené pomlčkou):

// camelCase in JavaScript
const BlogPost = {
  props: ['postTitle'],
  emits: ['updatePost'],
  template: `
    <h3>{{ postTitle }}</h3>
  `
}

<!-- kebab-case in HTML -->
<blog-post post-title="Ahoj!" @update-post="onUpdatePost"></blog-post>

Samouzavírací tagy ​

V předchozích ukázkách kódu jsme pro komponenty používali samouzavírací tagy:

<MyComponent />

Je to proto, že parser Vue šablon respektuje /> jako indikaci ukončení jakéhokoli tagu, bez ohledu na jeho typ.

V in-DOM šablonách však musíme vždy zahrnout explicitní uzavírací tagy:

<my-component></my-component>

Je to proto, že specifikace HTML umožňuje pouze několika konkrétním prvkům vynechat uzavírací tag, nejběžnější jsou <input> a <img>. Pokud u všech ostatních prvků uzavírací tag vynecháte, nativní HTML parser si bude myslet, že jste úvodní tag nikdy neukončili. Například následující kus kódu:

<my-component /> <!-- zde chceme tag ukončit... -->
<span>ahoj</span>

Bude vyhodnocen jako:

<my-component>
  <span>ahoj</span>
</my-component> <!-- prohlížeč ho však ukončí až tady -->

Omezení umístění elementů ​

Některé HTML elementy, jako jsou <ul>, <ol>, <table> a <select> mají omezení ohledně toho, jaké prvky se v nich mohou objevit, a některé elementy jako <li>, <tr> a <option> se mohou objevit pouze uvnitř určitých jiných elementů.

To povede k problémům při používání komponent s elementy, které mají taková omezení. Například:

<table>
  <blog-post-row></blog-post-row>
</table>

Naše komponenta <blog-post-row> bude vytažena (hoisted) jako neplatný obsah, což v případném vykresleném výstupu způsobí chyby. Toto můžeme obejít s použitím speciálního atributu is:

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

To je vše, co zatím potřebujete vědět o omezeních při parsování in-DOM šablon ‑ a vlastně konec Základů Vue. Gratulujeme! Je stále co se učit, ale nejprve doporučujeme, abyste si udělali přestávku a sami si s Vue hráli – vytvořit něco zábavného, nebo se podívat na některé Příklady, pokud jste tak ještě neučinili.

Jakmile si budete jisti znalostmi, které jste právě nabrali, pokračujte v průvodci, abyste se o komponentách dozvěděli více do hloubky.