Crear componentes reutilizables con Vue

Organiza y acelera tu desarrollo con componentes reutilizables en Vue. Aquí verás, paso a paso, cómo aislar la sección de un producto en un componente propio usando la Options API, registrar su template, data y methods, y montarlo en el orden correcto para lograr estado independiente y mejor mantenimiento.

¿Cómo convertir una sección en un componente reutilizable en Vue?

Componentizar evita copiar y pegar bloques grandes de HTML y lógica. En lugar de duplicar la sección de producto y su descripción, creamos un componente que podremos insertar cuantas veces queramos, cada uno con su propio estado.

• Una aplicación ya es un componente: HTML, CSS y JavaScript en un mismo lugar.
• Identifica en el template la sección del producto y su descripción.
• Objetivo: reutilizar y mantener sin duplicar código.
• Resultado: un nuevo tipo de etiqueta HTML personalizada que representa el componente.

¿Qué problemas resuelve la componentización?

• Evita duplicación: no más copiar y pegar secciones enteras.
• Mejora mantenimiento: cambios en un solo lugar.
• Aísla responsabilidades: cada componente maneja su propio estado y métodos.

¿Cómo crear y registrar el componente Product con Options API?

Para crear el componente, se registra con app.component y se definen sus opciones: template, data y methods. Así trasladamos la sección del producto, su estado (por ejemplo, la imagen activa y los códigos de descuento) y su lógica.

// Product.js
app.component('Product', {
  template: `
    <!-- Vue HTML -->
    <section class="product">
      <!-- HTML del producto y su descripción. -->
    </section>
  `,
  data() {
    return {
      // product: ...,
      // activeImage: ...,
      // discountCodes: ...,
    };
  },
  methods: {
    // métodos del producto: cambiar imagen, aplicar descuento, etc.
  }
});

• Usa un template string para pegar el HTML del producto.
• Si usas Visual Studio Code: añade el comentario “Vue HTML” para resaltar sintaxis.
• Traslada a data() el estado reactivo del producto: product, activeImage, discountCodes.
• Mueve a methods la lógica asociada al producto.

¿Qué rol cumplen template, data y methods?

• template: estructura HTML del componente.
• data: estado reactivo propio del componente.
• methods: funciones que operan sobre ese estado.

¿En qué orden se deben cargar los scripts y montar la app?

El registro del componente debe ocurrir antes de montar la aplicación. Primero se inserta el archivo del componente; después, se crea y monta la app. Así Vue conoce la etiqueta personalizada cuando renderiza.

<div id="app">
  <product></product>
</div>

<!-- Registrar el componente primero -->
<script src="Product.js"></script>

<!-- Luego crear y montar la app -->
<script>
  const app = Vue.createApp({ /* opciones de la app si aplican */ });
  // Nota: Product ya fue registrado con app.component en Product.js.
  app.mount('#app');
</script>

¿Cómo usar la nueva etiqueta personalizada en el HTML?

• Inserta el componente como una etiqueta: <product></product>.
• Puedes duplicarlo para múltiples productos: <product></product><product></product>.
• Cada instancia tiene estado independiente: cambiar la imagen activa o aplicar un código de descuento afecta solo a esa instancia.

¿Qué pasa con el estado global, como el carrito?

• Acciones como add to cart viven en el estado global de la aplicación.
• Desde el componente, esa referencia aún no existe: por eso puede “romperse”.
• Más adelante se conectará el estado del componente con el global de forma adecuada.

¿Tienes dudas sobre cómo aislar tu lógica o conectar el estado del componente con el global? Comparte tu caso en los comentarios y lo revisamos juntos.