Registrace komponent ​

Tato stránka předpokládá, že už jste četli Základy komponent. Pokud jsou pro vás komponenty nové, přečtěte si je jako první.

Komponenta Vue musí být "zaregistrována", aby Vue vědělo, kde má najít její implementaci, když na ni narazí v šabloně. Existují dva způsoby registrace komponent: globální a lokální.

Globální registrace ​

Komponenty můžeme zpřístupnit globálně v aktuální Vue aplikaci pomocí metody .component():

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // registrované jméno
  'MyComponent',
  // implementace
  {
    /* ... */
  }
)

Pokud používáte Single-File komponenty (SFC), budete registrovat importované soubory .vue:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Metodu .component() lze řetězit:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

Globálně registrované komponenty lze použít v šabloně libovolné komponenty v rámci této aplikace:

<!-- toto bude fungovat v jakékoliv komponentě v aplikaci -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

To platí dokonce i pro všechny dílčí komponenty, což znamená, že všechny tři tyto komponenty budou také dostupné jedna v druhé.

Lokální registrace ​

I když je globální registrace pohodlná, má několik nevýhod:

1. Globální registrace zabraňuje build nástrojům odstraňovat nepoužívané komponenty (tzv. "tree-shaking"). Pokud komponentu globálně zaregistrujete, ale nakonec ji v aplikaci nikde nepoužijete, bude stále zahrnuta do výsledného distribučního balíčku.

2. Kvůli globální registraci jsou vztahy závislostí v rozsáhlých aplikacích méně jednoznačné. Ztěžuje to vyhledání implementace komponenty potomka z komponenty rodiče, který ji používá. To může mít vliv na dlouhodobou udržovatelnost podobně jako používání příliš mnoha globálních proměnných.

Lokální registrace omezuje dostupnost registrovaných komponent pouze pro scope aktuální komponenty. Díky tomu je vztah závislosti jasnější, což usnadňuje "tree-shaking" proces.

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

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

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

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

<template>
  <ComponentA />
</template>

Pro každou vlastnost v sekci components bude klíčem registrovaný název komponenty, zatímco hodnota bude obsahovat její implementaci. Výše uvedený příklad používá zkrácený zápis "property shorthand" podle specifikace ES2015 a je ekvivalentní:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

Zapamatujte si, že lokálně registrované komponenty nejsou přístupné v komponentách potomků. V tomto případě bude ComponentA dostupá pouze v aktuální komponentě, v komponentách potomků nikoliv.

Velká a malá písmena v názvech komponent ​

V celém průvodci používáme při registraci komponent PascalCase názvy. Je to proto, že:

1. PascalCase názvy jsou platné JavaScript identifikátory. To usnadňuje import a registraci komponent v JavaScriptu. Pomáhá to také vývojovým prostředím IDE při funkci automatického dokončování.

2. <PascalCase /> činí zřejmější, že se v šablonách jedná o Vue komponentu, nikoli o nativní HTML element. Odlišuje také Vue komponenty od jiných custom prvků (Web Components).

Toto je doporučený způsob když pracujete s SFC nebo string šablonami. Nicméně jak rozebíráme v části Omezení při anlýze in-DOM šablon, PascalCase tagy nelze použít v DOM-šablonách.

Vue naštěstí podporuje překlad kebab-case tagů na komponenty registrované pomocí PascalCase. To znamená, že na komponentu registrovanou jako MyComponent lze v šabloně odkazovat jak prostřednictvím <MyComponent>, tak i <my-component>. To nám umožňuje používat stejný JavaScript kód registrace komponent bez ohledu na zdroj šablony.