Cómo crear componentes en Vue

Crear componentes en Vue es clave para lograr HTML semántico, código reutilizable y mejor mantenibilidad. Aquí verás, paso a paso y con buenas prácticas, cómo registrar componentes en forma global y local, cuándo conviene cada enfoque y cómo evitar errores de compilación comunes.

¿Qué es el sistema de componentes de Vue y por qué importa?

Los componentes de Vue permiten escribir tus propios elementos HTML, haciendo el código más semántico, reutilizable y fácil de organizar. Con ellos puedes componer interfaces claras y mantener una estructura robusta.

• Componentes: elementos reutilizables con su propia plantilla y lógica.
• HTML semántico: etiquetas claras que comunican intención.
• Mantenibilidad: separación por piezas pequeñas y enfocadas.
• Reglas del template: siempre un único elemento padre en cada componente.
• Productividad: puedes apoyarte en plug ins del editor (por ejemplo, atajos o shorthands en Atom).

¿Cómo crear y registrar un componente global en Vue?

El registro global permite usar un componente en cualquier parte de la aplicación. Es práctico, aunque no siempre recomendable si buscas optimizar performance.

¿Cómo estructurar un archivo .vue mínimo?

Un componente puede comenzar solo con la plantilla si no necesita estilos ni script:

<!-- ChildComponent.vue -->
<template>
  <h1>Este es un componente hijo</h1>
</template>

Puntos clave.

• Mantén un único nodo raíz en el template.
• Si no usas <script> o <style>, elimínalos para no cargar el proceso de compilación.

¿Cómo registrar con Vue.component y usar el tag?

En tu punto de entrada (por ejemplo, main.js) importa y registra globalmente. Recuerda usar rutas relativas ./ y que en archivos .vue debes incluir la extensión.

// main.js
import Vue from 'vue'
import App from './App.vue'
import ChildComponent from './ChildComponent.vue'

Vue.component('child', ChildComponent)

new Vue({
  render: h => h(App)
}).$mount('#app')

Luego, úsalo por nombre de etiqueta en App.vue:

<template>
  <div>
    <child></child>
  </div>
</template>

¿Cuándo conviene el registro global?

Úsalo cuando el componente se empleará en la mayoría de vistas o cuando creas librerías tipo plug ins reutilizables. De lo contrario, prefiere el registro local para mejorar la performance de la aplicación.

¿Cómo registrar componentes locales y evitar errores comunes?

El registro local declara el componente directamente en el archivo donde se usa. Así controlas su alcance y evitas cargar componentes innecesarios.

¿Cómo importar y declarar con la propiedad components?

Crea un componente local simple:

<!-- LocalComponent.vue -->
<template>
  <h1>Este es un local component</h1>
</template>

En el componente padre (por ejemplo, ChildComponent.vue) importa y registra en la propiedad components. Recuerda que un componente exporta un objeto con export default usado como view model.

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>Este es un componente hijo</h1>
    <local-component></local-component>
  </div>
</template>

<script>
import LocalComponent from './LocalComponent.vue'

export default {
  components: {
    LocalComponent // atajo de ES2015 si el nombre y la variable coinciden
  }
}
</script>

Claves prácticas.

• Propiedad components: mapea el nombre del elemento al objeto del componente.
• Usa atajos de ES2015 para simplificar objetos cuando los nombres coinciden.

¿Cómo escribir el tag en kebab-case a partir de PascalCase?

Vue transforma automáticamente nombres en PascalCase a kebab-case para las etiquetas. Es decir, LocalComponent se usa como <local-component>. Esto evita inconsistencias al escribir los tags en el template.

¿Cómo evitar el error por múltiples nodos raíz?

Si agregas más de un elemento en el template, encapsula todo en un contenedor (por ejemplo, <div>). De lo contrario, aparecerá un error de compilación y la aplicación no funcionará.

Buenas prácticas finales.

• Verifica en el inspector que el HTML final refleja el resultado compilado por Vue.
• Revisa el árbol de componentes para entender la jerarquía: App como raíz, luego hijos como Child y LocalComponent.
• Sigue la data y propiedades entre componentes desde esa vista.

¿Tienes dudas o ejemplos propios sobre registro global vs local, nombres de etiquetas o estructura de componentes? Comenta tus casos y soluciones para enriquecer el aprendizaje en equipo.