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í.

Vue komponenta 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ékoli 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 dostupné i 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 nikde v aplikaci nepoužijete, pořád bude 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 možnosti components bude klíčem registrovaný název komponenty, zatímco hodnota bude obsahovat její implementaci. Výše uvedený příklad používá zkrácený „property shorthand“ zápis 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ů nikoli.

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 elementů (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 parsování in-DOM šablon, PascalCase tagy nelze použít v in-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.