Tutorial Vuejs: Introducción a componentes

¿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

1. Nombres de componentes

• Componentes de raíz: Los componentes principales, como App.vue, deben estar en la raíz de la carpeta src.
• 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 llamado UserProfile.

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

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

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

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

1. 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
         }
       ]
     });

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