Vue Academy · Leçon

Créer et enregistrer des composants

Définissez et enregistrez des composants globalement et localement

Créer et enregistrer des composants est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Pourquoi utiliser des composants ?

Les composants vous permettent de diviser une interface utilisateur en éléments indépendants et réutilisables.

Chacun gère son propre modèle, sa logique et son style
Vous les composez pour former des structures plus grandes
Ils rendent le code organisé et facile à maintenir

Composants monofichiers

Un composant monofichier (.vue) regroupe trois blocs dans un seul fichier.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

Définir un composant

Le bloc modèle contient le balisage. Le bloc script contient la logique. Le bloc style contient le CSS.

Les styles portée limitée s’appliquent uniquement à ce composant
Les modèles doivent avoir une structure claire composée d’éléments

Noms des composants

Par convention, les fichiers de composants et leur utilisation suivent la notation PascalCase.

Fichier : UserCard.vue
Dans les modèles : <UserCard />
PascalCase distingue les composants du HTML natif

Importer un composant

Pour utiliser un composant, importez-le là où vous en avez besoin.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

Enregistrement local (script setup)

Avec script setup, il suffit d’importer un composant pour le rendre disponible dans le modèle. Aucune étape d’enregistrement supplémentaire n’est nécessaire.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

Enregistrement local (API des options)

Avec l’API des options, vous enregistrez les composants dans l’option components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Enregistrement global

L’enregistrement global avec app.component rend un composant utilisable partout sans l’importer.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

Global ou local

Choisir une portée d’enregistrement :

Global : pratique, mais alourdit le paquet et rend l’utilisation plus difficile à suivre
Local : importations explicites, meilleure élimination du code inutilisé et dépendances plus claires

Préférez l’enregistrement local, sauf pour quelques composants de base réellement universels.

Réutiliser un composant

Le même composant peut être utilisé de nombreuses fois. Chaque instance est indépendante.

<template>
  <UserCard />
  <UserCard />
  <UserCard />
</template>

<!-- three separate instances,
     each with its own state -->

Imbriquer des composants

Les composants forment une arborescence. Un parent peut contenir des enfants, qui contiennent leurs propres enfants.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

Vérification rapide

Vérifiez votre compréhension de l’enregistrement des composants.

Récapitulatif : créer des composants

Vous avez appris à créer et à enregistrer des composants :

Les fichiers .vue contiennent le modèle, le script et le style
Utilisez des noms en PascalCase
script setup enregistre automatiquement les composants importés
L’API des options utilise l’option components
app.component() effectue un enregistrement global

Ensuite : propriétés et événements personnalisés.

Questions Fréquemment Posées

La leçon « Créer et enregistrer des composants » est-elle gratuite ?

Oui — le texte complet de « Créer et enregistrer des composants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer et enregistrer des composants » ?

Définissez et enregistrez des composants globalement et localement Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Créer et enregistrer des composants » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Créer et enregistrer des composants
Props et événements personnalisés
Emplacements et emplacements avec portée

← Retour à Vue Academy