Vuejs
Tutorial Vuejs: Introducción a componentes
Vue Introducción a componentes: Aprende a crear, gestionar, y optimizar componentes reutilizables y modulares con esta guía completa y actualizada.
Aprende Vuejs y certifícate¿Qué es un componente en Vuejs?
Un componente en Vue es una instancia reutilizable de Vue que encapsula su propio contenido, lógica y estilo. Los componentes permiten dividir la interfaz de usuario en partes independientes, reutilizables y manejables.
Cada componente puede tener su propia estructura HTML, lógica JavaScript o TypeScript y estilos CSS, lo que facilita la creación de aplicaciones modulares y mantenibles.
Un componente en Vue se define mediante un objeto de opciones que especifica sus propiedades, métodos, ciclo de vida y otras configuraciones. A continuación se muestra un ejemplo básico de un componente en Vue:
<script setup lang="ts">
const titulo = "Hola mundo!";
const mensaje = "Este es un componente en Vue";
</script>
<template>
<h1>{{ titulo }}</h1>
<p>{{ mensaje }}</p>
</template>
En este ejemplo, se define un componente llamado mi-componente
, que incluye una plantilla HTML, un script TypeScript, y para traerlo tan sólo tendríamos que importarlo en el componente que lo queramos introducir, en este caso lo llamaremos en el componente principal App
.
<script setup lang="ts">
import Micomponente from './components/mi-componente.vue';
</script>
<template>
<Mi-Componente />
</template>
Características clave de los componentes en Vue:
- Reutilización: Los componentes permiten reutilizar código en diferentes partes de la aplicación, lo que reduce la duplicación y mejora la mantenibilidad.
- Encapsulamiento: Cada componente maneja su propio estado y lógica, lo que facilita la gestión de la complejidad en aplicaciones grandes.
- Comunicación: Los componentes pueden comunicarse entre sí mediante props (propiedades) y eventos, lo que permite la interacción y el intercambio de datos.
- Composición: Los componentes pueden anidarse dentro de otros componentes, lo que permite construir interfaces de usuario complejas a partir de piezas más simples.
Componentes de un único archivo (SFC)
En Vue, los componentes de un único archivo (SFC, Single File Components) son una forma eficiente y organizada de definir componentes. Estos archivos .vue
encapsulan la estructura HTML, la lógica JavaScript y los estilos CSS en un solo archivo, lo que facilita la organización y mantenimiento del código en aplicaciones complejas.
Un archivo .vue
típico tiene tres secciones principales:
<template>
: define la estructura HTML del componente.<script>
: contiene la lógica y el comportamiento del componente.<style>
: incluye los estilos CSS específicos para el componente.
A continuación se muestra un ejemplo básico de un componente de un único archivo:
<script setup lang="ts">
const titulo = "Hola Mundo";
const mensaje = "Este es un componente en Vue";
</script>
<template>
<h1>{{ titulo }}</h1>
<p>{{ mensaje }}</p>
</template>
<style scoped>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
En este ejemplo, el componente MiComponente.vue
incluye una sección <template>
para la estructura HTML, una sección <script>
para la lógica JavaScript y una sección <style>
para los estilos CSS. La opción scoped
en la etiqueta <style>
asegura que los estilos sean aplicados solo a este componente, evitando conflictos con otros estilos en la aplicación.
Beneficios de los SFC
- Encapsulamiento completo: Cada componente tiene su propia estructura, lógica y estilos, lo que facilita el manejo de componentes complejos y la reutilización de código.
- Organización del código: Al tener todas las partes del componente en un solo archivo, se mejora la legibilidad y mantenibilidad del código.
- Compatibilidad con herramientas: Los SFC son compatibles con herramientas de construcción modernas como Webpack y Vite, lo que permite optimizar el rendimiento y la gestión de dependencias.
Importación y uso de SFC
Una vez que se tiene configurado el entorno de desarrollo, es posible importar y utilizar componentes de un único archivo en otros componentes o en la instancia raíz de Vue.
Ejemplo de importación y uso de un SFC:
<script setup lang="ts">
import Micomponente from './components/mi-componente.vue';
</script>
<template>
<Mi-Componente />
</template>
En este ejemplo, el componente MiComponente.vue
se importa y se registra en el componente principal de Vue, permitiendo su uso dentro de la aplicación.
Scoped CSS y estilos globales
La opción scoped
en la etiqueta <style>
asegura que los estilos sean aplicados solo al componente actual. Sin embargo, es posible definir estilos globales que se aplican a toda la aplicación mediante la omisión de la opción scoped
o utilizando archivos CSS separados.
Ejemplo de scoped CSS:
<style scoped>
h1 {
color: blue;
}
</style>
Ejemplo de estilos globales:
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
</style>
En resumen, los componentes de un único archivo en Vue ofrecen una forma eficiente y organizada de desarrollar aplicaciones modulares y mantenibles, aprovechando la separación de preocupaciones y la compatibilidad con herramientas modernas de construcción.
Registro y renderizado de componentes
El registro de componentes en Vue puede hacerse de dos maneras: globalmente o localmente, dependiendo del alcance en el que se necesiten utilizar. A continuación, se explica cómo realizar ambos tipos de registro y cómo renderizar los componentes registrados en la aplicación.
Renderizado de componentes
Una vez que un componente ha sido registrado, puede ser utilizado en las plantillas de otros componentes. Para renderizar un componente, se utiliza su nombre registrado como una etiqueta HTML en la plantilla.
Ejemplo de renderizado en una plantilla
<template>
<div>
<h1>Aplicación Principal</h1>
<Mi-componente />
</div>
</template>
<script>
import Micomponente from './components/mi-componente.vue';
</script>
En este ejemplo, el componente mi-componente
se renderiza dentro de la plantilla del componente App
. Dado que mi-componente
ha sido registrado, Vue sabe cómo instanciar y renderizarlo correctamente.
Uso de props y slots
Los componentes en Vue pueden recibir datos a través de props
y distribuir contenido con slots
. Esto permite una mayor flexibilidad y reutilización de los componentes.
Ejemplo de uso de props
<script setup lang="ts">
defineProps({
titulo: String,
});
const mensaje = "Este es un componente en Vue";
</script>
<template>
<h1>{{ titulo }}</h1>
<p>{{ mensaje }}</p>
</template>
Para utilizar este componente con una prop:
<script setup lang="ts">
import MiComponente from './components/mi-componente.vue';
</script>
<template>
<Mi-Componente titulo="Hola Mundo!" />
</template>
Ejemplo de uso de slots
<template>
<slot />
</template>
Para utilizar este componente con un slot:
<script setup lang="ts">
import MiComponente from './components/mi-componente.vue';
</script>
<template>
<Mi-Componente>
<h1>Hola Mundo</h1>
</Mi-Componente>
</template>
El uso de props
y slots
permite que los componentes sean más flexibles y reutilizables, facilitando la creación de interfaces de usuario dinámicas y modulares.
Consideraciones de rendimiento
Registrar componentes globalmente puede afectar el rendimiento de la aplicación si se hace en exceso, ya que todos los componentes registrados globalmente se cargan independientemente de si se utilizan o no.
Por esta razón, se recomienda registrar componentes globalmente solo cuando sea necesario y utilizar el registro local para componentes específicos de una vista o módulo.
En resumen, el registro y renderizado de componentes en Vue es una parte fundamental del desarrollo con esta tecnología, permitiendo crear aplicaciones modulares y mantenibles.
Convenciones de nombres y organización de archivos y carpetas
En Vue, seguir convenciones de nombres y una organización adecuada de archivos y carpetas es crucial para mantener la legibilidad, la mantenibilidad y la escalabilidad del proyecto. A continuación, se detallan las prácticas recomendadas.
Convenciones de nombres
- Nombres de componentes
- Componentes de raíz: Los componentes principales, como
App.vue
, deben estar en la raíz de la carpetasrc
. - Componentes hijos: Utiliza nombres en PascalCase para los componentes. Ejemplo:
UserProfile.vue
,NavBar.vue
. - Nombres de archivos: El nombre del archivo debe coincidir con el nombre del componente. Ejemplo:
UserProfile.vue
debe contener un componente llamadoUserProfile
.
- Convenciones de nomenclatura de archivos
- PascalCase: Utiliza PascalCase para los nombres de archivos de componentes, como
UserProfile.vue
. - Kebab-case: Utiliza kebab-case para las rutas de los archivos y directorios en el sistema de archivos. Ejemplo:
user-profile.vue
.
- Propiedades y métodos
- Props: Nombra las propiedades en camelCase en el código JavaScript o TypeScript y en kebab-case en las plantillas HTML. Ejemplo:
props: {
userName: String
}
<user-profile user-name="JohnDoe"></user-profile>
- Métodos: Utiliza camelCase para los nombres de métodos. Ejemplo:
fetchUserData
.
Organización de archivos y carpetas
- Estructura básica del proyecto
src/
: Contiene todo el código fuente de la aplicación.assets/
: Archivos estáticos como imágenes, fuentes y otros recursos.components/
: Componentes reutilizables de la aplicación.views/
: Componentes de vista que son renderizados por el router.router/
: Configuración del enrutador.store/
: Gestión del estado global (Vuex).styles/
: Archivos CSS o preprocesadores como SCSS.utils/
: Funciones y utilidades auxiliares.App.vue
: Componente raíz de la aplicación.main.js
: Punto de entrada principal para inicializar la aplicación.
- Componentes
- Componentes reutilizables: Coloca los componentes reutilizables en la carpeta
components
. Ejemplo:
src/
components/
NavBar.vue
UserProfile.vue
- Componentes específicos de una vista: Coloca los componentes específicos de una vista en una subcarpeta dentro de
views
. Ejemplo:
src/
views/
Home/
Home.vue
HomeHeader.vue
HomeFooter.vue
About/
About.vue
- Vistas y enrutamiento
- Vistas: Coloca las vistas en la carpeta
views
. Cada vista puede tener su propia carpeta si contiene múltiples componentes específicos. - Enrutador: La configuración del enrutador debe estar en la carpeta
router
. Ejemplo:
// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home/Home.vue';
import About from '../views/About/About.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});
- Estilos
- Estilos globales: Coloca los estilos globales en la carpeta
styles
. Ejemplo:
src/
styles/
main.scss
variables.scss
- Estilos específicos de componentes: Utiliza la sección
<style scoped>
dentro de los archivos.vue
para estilos específicos de componentes.
Ejemplo de estructura de proyecto
src/
assets/
logo.png
components/
NavBar.vue
UserProfile.vue
views/
Home/
Home.vue
HomeHeader.vue
HomeFooter.vue
About/
About.vue
router/
index.js
store/
index.js
modules/
user.js
products.js
styles/
main.scss
variables.scss
utils/
api.js
helpers.js
App.vue
main.js
Esta estructura y convenciones de nombres aseguran que el proyecto Vue sea fácil de navegar y mantener, permitiendo a los desarrolladores trabajar de manera eficiente y colaborativa.
Ejercicios de esta lección Introducción a componentes
Evalúa tus conocimientos de esta lección Introducción a componentes con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Solicitud HTTP con Axios
Estilización de componentes en Vue.js
Comunicación de componentes con props
Uso de hooks de ciclo de vida en Vue
Introducción a los componentes
Introducción a Vue
Navegación programática y redirección
Uso de la directiva v-if en Vuejs
Crear componente Composition API
Realizar una solicitud GET con Fetch API en Vue
Uso avanzado de los composables
Galería de imágenes con navegación y rutas
Uso de rutas anidadas y dinámicas
Definición y manejo de rutas en Vue
Uso de la directiva v-for en Vuejs
Manejo de eventos con v-on
Crear un componente con Options API en Vue
Creación de rutas con Vue Router
Uso básico de los composables
Binding bidireccional con v-model y defineModel
Instalación y configuración
Lista de tareas básica en Vuejs
Uso de provide e inject
Gestión de tareas con estado global y API
Introducción a la sintaxis de plantillas
Implementar reactividad con ref y reactive
Componente Vue con Suspense
Evaluación test de conocimientos Vuejs
Todas las lecciones de Vuejs
Accede a todas las lecciones de Vuejs y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Vue Y Su Ecosistema
Introducción Y Entorno
Instalar Y Configurar Vue Con Vite
Introducción Y Entorno
Introducción A La Sintaxis De Plantillas
Componentes
Introducción A Componentes
Componentes
Componentes Con Options Api
Componentes
Componentes Con Composition Api
Componentes
Renderizado Condicional Con V-if
Componentes
Renderizado Iterativo Con V-for
Componentes
Props Y Comunicación Entre Componentes
Componentes
Manejo De Eventos En Vue Con V-on
Componentes
Binding Bidireccional Con V-model Y Definemodel
Componentes
Estilización De Componentes
Componentes
Reactividad Con Ref Y Reactive
Composición Y Reactividad
Ciclo De Vida Con Composition Api
Composición Y Reactividad
Composition Api: Provide E Inject
Composición Y Reactividad
Introducción A Los Composables
Composición Y Reactividad
Uso Avanzado De Composables
Composición Y Reactividad
Introducción A Vue Router
Navegación Y Enrutamiento
Definición Y Manejo De Rutas
Navegación Y Enrutamiento
Rutas Anidadas Y Dinámicas
Navegación Y Enrutamiento
Navegación Programática Y Redirección
Navegación Y Enrutamiento
Solicitudes Http Con Fetch Api
Interacción Http Con Apis De Backend
Solicitudes Http Con Axios
Interacción Http Con Apis De Backend
Introducción A Suspense
Interacción Http Con Apis De Backend
Evaluación Test De Conocimientos Vuejs
Evaluación
Certificados de superación de Vuejs
Supera todos los ejercicios de programación del curso de Vuejs y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender qué es un componente en Vue y sus características clave.
- Definir y utilizar componentes básicos en Vue.
- Implementar componentes de un único archivo (SFC) con Vue.
- Configurar el entorno de desarrollo con Vue CLI y Vite.
- Importar y utilizar componentes dentro de una aplicación Vue.
- Emplear scoped CSS y estilos globales en componentes.
- Registrar y renderizar componentes en Vue.
- Seguir convenciones de nombres y organización de archivos y carpetas en proyectos Vue