0Pricing
Vue Academy · Lección

Creación y registro de componentes

Defina y registre componentes de forma global y local

Creación y registro de componentes es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

¿Por qué usar componentes?

Los componentes permiten dividir una interfaz de usuario en piezas independientes y reutilizables.

  • Cada uno administra su propia plantilla, lógica y estilos
  • Puede combinarlos para crear estructuras más grandes
  • Hacen que el código esté organizado y sea fácil de mantener

Componentes de un solo archivo

Un componente de un solo archivo (.vue) reúne tres bloques en un mismo archivo.

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

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

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

Definición de un componente

El bloque template contiene el marcado. El bloque script contiene la lógica. El bloque style contiene el CSS.

  • Los estilos scoped se aplican únicamente a este componente
  • Las plantillas necesitan una estructura clara de elementos

Nombres de los componentes

Por convención, los archivos de componentes y su uso emplean PascalCase.

  • Archivo: UserCard.vue
  • En las plantillas: <UserCard />
  • PascalCase distingue los componentes del HTML nativo

Importación de un componente

Para usar un componente, impórtelo donde lo necesite.

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

<template>
  <UserCard />
</template>

Registro local (script setup)

Con script setup, basta con importar un componente para que esté disponible en la plantilla. No se necesita ningún paso adicional de registro.

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

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

Registro local (Options API)

Con la Options API, registre los componentes en la opción components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Registro global

El registro global mediante app.component permite usar un componente en cualquier lugar sin 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")

Global frente a local

Para elegir el ámbito de registro:

  • Global: es práctico, pero aumenta el tamaño del bundle y dificulta rastrear el uso
  • Local: ofrece importaciones explícitas, mejor tree-shaking y dependencias más claras

Prefiera el registro local, excepto para unos pocos componentes base verdaderamente universales.

Reutilización de un componente

El mismo componente puede utilizarse muchas veces. Cada instancia es independiente.

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

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

Anidamiento de componentes

Los componentes forman un árbol. Un componente padre puede contener componentes hijos, que a su vez pueden contener sus propios hijos.

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

<!-- ArticleList contains ArticleCard children -->

Comprobación rápida

Compruebe sus conocimientos sobre el registro de componentes.

Repaso: creación de componentes

Ha aprendido a crear y registrar componentes:

  • Los archivos .vue contienen la plantilla, el script y los estilos
  • Use nombres en PascalCase
  • script setup registra automáticamente los componentes importados
  • La Options API utiliza la opción components
  • app.component() registra componentes globalmente

A continuación: props y eventos personalizados.

Preguntas frecuentes

¿La lección «Creación y registro de componentes» es gratis?

Sí — el texto completo de «Creación y registro de componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Creación y registro de componentes»?

Defina y registre componentes de forma global y local Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Creación y registro de componentes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Creación y registro de componentes
  2. Props y eventos personalizados
  3. Slots y slots con ámbito
← Volver a Vue Academy