0Pricing
Vue Academy · Lezione

Creazione e registrazione dei componenti

Definisca e registri componenti globalmente e localmente.

Creazione e registrazione dei componenti è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Perché utilizzare i componenti?

I componenti permettono di suddividere un'interfaccia utente in parti indipendenti e riutilizzabili.

  • Ognuno gestisce il proprio template, la propria logica e il proprio stile
  • È possibile combinarli per creare strutture più grandi
  • Rendono il codice più organizzato e manutenibile

Componenti a file singolo

Un componente a file singolo (.vue) riunisce tre blocchi in un unico file.

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

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

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

Definizione di un componente

Il blocco template contiene il markup. Il blocco script contiene la logica. Il blocco style contiene il CSS.

  • Gli stili scoped si applicano solo a questo componente
  • I template devono avere una struttura chiara degli elementi

Nomi dei componenti

Per convenzione, i file dei componenti e il loro utilizzo usano PascalCase.

  • File: UserCard.vue
  • Nei template: <UserCard />
  • PascalCase distingue i componenti dagli elementi HTML nativi

Importazione di un componente

Per utilizzare un componente, lo si importi nel punto in cui serve.

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

<template>
  <UserCard />
</template>

Registrazione locale (script setup)

Con script setup, è sufficiente importare un componente per renderlo disponibile nel template. Non è necessario alcun passaggio aggiuntivo di registrazione.

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

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

Registrazione locale (Options API)

Con l'Options API, i componenti vengono registrati nell'opzione components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Registrazione globale

La registrazione globale con app.component rende un componente utilizzabile ovunque senza importarlo.

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

Globale e locale

Scelta dell'ambito di registrazione:

  • Globale: è comoda, ma aumenta le dimensioni del bundle e rende più difficile individuare gli utilizzi
  • Locale: utilizza import espliciti, migliora il tree-shaking e rende più chiare le dipendenze

Preferisca la registrazione locale, tranne che per pochi componenti di base realmente universali.

Riutilizzo di un componente

Lo stesso componente può essere utilizzato molte volte. Ogni istanza è indipendente.

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

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

Nidificazione dei componenti

I componenti formano un albero. Un componente padre può contenere componenti figli, che a loro volta possono contenere i propri figli.

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

<!-- ArticleList contains ArticleCard children -->

Verifica rapida

Verifichi la propria comprensione della registrazione dei componenti.

Riepilogo: creazione dei componenti

Ha imparato a creare e registrare i componenti:

  • I file .vue contengono template, script e style
  • Utilizzi nomi in PascalCase
  • script setup registra automaticamente i componenti importati
  • L'Options API utilizza l'opzione components
  • app.component() registra i componenti globalmente

Prossimo argomento: props ed eventi personalizzati.

Domande Frequenti

La lezione «Creazione e registrazione dei componenti» è gratuita?

Sì — il testo completo di «Creazione e registrazione dei componenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Creazione e registrazione dei componenti»?

Definisca e registri componenti globalmente e localmente. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Creazione e registrazione dei componenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Creazione e registrazione dei componenti
  2. Props ed eventi personalizzati
  3. Slot e slot con ambito
← Torna a Vue Academy