Enregistrement des composants #

Cette page suppose que vous avez déjà lu les principes fondamentaux des composants. Lisez-les d'abord si vous débutez avec les composants.

Un composant Vue doit être "enregistré" afin que Vue sache où localiser son implémentation lorsqu'il est rencontré dans un template. Il existe deux façons d'enregistrer des composants : globale et locale.

Enregistrement global #

Nous pouvons rendre les composants disponibles globalement dans l'application Vue actuelle en utilisant la méthode app.component() :

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // le nom enregistré
  'MyComponent',
  // l'implémentation
  {
    /* ... */
  }
)

Si vous utilisez des SFC, vous enregistrerez les fichiers .vue importés :

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

La méthode app.component() peut être chaînée :

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

Les composants enregistrés globalement peuvent être utilisés dans le template de n'importe quel composant de cette application :

<!-- cela fonctionnera dans n'importe quel composant de l'application -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

Cela s'applique même à tous les sous-composants, ce qui signifie que ces trois composants seront également disponibles dans chacun d'eux.

Enregistrement local #

Bien que pratique, l'enregistrement global présente quelques inconvénients :

1. L'enregistrement global empêche les systèmes de build de supprimer les composants inutilisés (alias "tree-shaking"). Si vous enregistrez globalement un composant mais que vous ne l'utilisez nulle part dans votre application, il sera toujours inclus dans le bundle final.

2. L'enregistrement global rend les relations entre dépendances moins explicites dans les applications de taille importante. Cela rend difficile la localisation de l'implémentation d'un composant enfant à partir d'un composant parent qui l'utilise. Cela peut affecter la maintenabilité à long terme, de la même manière que si vous utilisiez trop de variables globales.

L'enregistrement local limite la disponibilité des composants enregistrés au composant actuel uniquement. Cela rend la relation de dépendance plus explicite et est plus adaptée au tree-shaking.

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

Pour chaque propriété de l'objet components, la clé sera le nom enregistré du composant, tandis que la valeur contiendra l'implémentation du composant. L'exemple ci-dessus utilise le raccourci de propriété ES2015 et équivaut à :

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

Notez que les composants enregistrés localement ne sont pas également disponibles dans les composants descendants. Dans ce cas, ComponentA ne sera disponible que dans le composant actuel, et non pas dans tous autres de ses composants enfants ou descendants.

Casse des noms des composants #

Tout au long de ce guide, nous utilisons des noms en casse Pascal (PascalCase) lors de l'enregistrement des composants. Ceci est dû au fait:

1. Les noms en casse Pascal sont des identifiants JavaScript valides. Cela facilite l'import et l'enregistrement des composants en JavaScript. Il aide également les IDE avec l'auto-complétion.

2. <PascalCase /> rend plus évident qu'il s'agit d'un composant Vue au lieu d'un élément HTML natif dans les templates. Il différencie également les composants Vue des custom elements (web components).

Il s'agit du style recommandé lorsque vous travaillez avec des templates à base de SFC ou de chaînes de caratères. Cependant, comme indiqué dans les mises en garde concernant l'analyse du template DOM, les balises déclarées en casse Pascal ne sont pas utilisables dans les templates DOM.

Heureusement, Vue prend en charge la résolution des balises au format kebab-case en leur équivalent composants enregistrés à la condition qu'ils utilisent la casse Pascal. Cela signifie qu'un composant enregistré en tant que MyComponent peut être référencé dans le template via à la fois <MyComponent> et <my-component>. Cela nous permet d'utiliser le même code d'enregistrement de composant JavaScript quelle que soit la source du template.