Los componentes son bloques de construcción reutilizables que encapsulan estructura, estilo y comportamiento. En Vue.js, una aplicación completa se organiza como una jerarquía de componentes, donde la instancia principal de Vue actúa como el componente raíz.

Registro de Componentes

Antes de que un componente pueda ser utilizado, debe ser registrado. Existen dos formas principales de hacerlo:

1. Componentes Globales

Un componente registrado globalmente está disponible en toda la aplicación Vue. Se registra utilizando app.component().

app.component('nombre-del-componente', {
 template: `
   <div>
     
     Contenido del componente global.
   </div>
 `
});
 

Nota: Los componentes deben definirse antes de la instancia de Vue que los utilizará.

2. Componentes Locales

Los componentes locales se registran dentro de la propiedad components de otro componente. Solo están disponibles para el componente que los registra y sus descendientes.

const app = Vue.createApp({
 components: {
   'componente-local': {
     template: `
       <div>
         
         Contenido del componente local.
       </div>
     `
   }
 }
});
 

Nota: Los componentes locales deben estar definidos dentro de la instancia de Vue o de otro componente que sea parte de esa instancia.

Propiedades de los Componentes: Props

Los props permiten la comunicación de datos desde un componente padre a un componente hijo. El componente hijo declara las props que espera recibir, y el padre las pasa como atributos al usar el componente hijo.

Uso Básico de Props

Se definen en la propiedad props del componente.

app.component('boton-personalizado', {
 template: `
   <button :class="tipoBoton">{{ nombreBoton }} - {{ contador }}</button>
 `,
 props: ['nombreBoton', 'tipoBoton'],
 data() {
   return {
     contador: 1
   };
 }
});
 

En este ejemplo, el componente boton-personalizado espera recibir las props nombreBoton y tipoBoton.

Flujo de Datos con Props

Los props facilitan la transmisión de datos del padre al hijo. Cuando los datos en el padre cambian, el hijo los reflejará automáticamente. Sin embargo, los props son unidireccionales y están destinados a ser de solo lectura dentro del componente hijo para mantener la predictibilidad del flujo de datos.

Validación y Restricción de Props

Vue.js ofrece mecanismos para validar los datos que se pasan a través de props:

a) Validación por Tipo

Se puede especificar el tipo de dato esperado para una prop.

props: {
 miProp: [String, Number] // Acepta String o Number
}
 

b) Prop Obligatoria

Se puede marcar una prop como requerida.

props: {
 propObligatoria: {
   type: String,
   required: true
 }
}
 

c) Valores Predeterminados

Se pueden asignar valores por defecto a las props si no se proporcionan explícitamente.

props: {
 valorPorDefecto: {
   type: String,
   default: 'Valor Inicial' // Para tipos primitivos
 },
 objetoPorDefecto: {
   type: Object,
   default: () => ({}) // Para tipos de referencia, usar una factory function
 }
}
 

d) Reglas de Validación Personalizadas

Para validaciones más complejas, se puede usar un validador.

props: {
 miValor: {
   validator: function (value) {
     // Debe retornar true si la validación es exitosa
     return value.length > 5;
   }
 }
}
 

Atributos que no son Props (Non-Prop Attributes)

Los atributos pasados a un componente que no han sido declarados explícitamente en la lista de props se conocen como atributos no-prop. Por defecto, estos atributos se propagan automáticamente al elemento raíz del componente si este tiene un único elemento raíz (esto se llama "Attribute Inheritance").

Ejemplos comunes de atributos no-prop incluyen class, style, id, y manejadores de eventos como @click (si no están definidos como props).

Deshabilitar la Propagación de Atributos

En ocasiones, se desea contrloar dónde se aplican los atributos no-prop. Esto se puede lograr deshabilitando la propagación automática y enlazando explícitamente los atributos.

Se utiliza la opción inheritAttrs: false en la configuración del componente.

app.component('componente-con-attrs', {
 inheritAttrs: false, // Deshabilita la propagación automática
 template: `
   <div>
     <p v-bind="$attrs">Este párrafo recibe atributos externos.</p>
   </div>
 `
});
 

La propiedad especial $attrs contiene todos los atributos no-prop pasados al componente. Al enlazar v-bind="$attrs" a un elemento específico, se fuerzan esos atributos a aplicarrse a ese elemento en particular, en lugar de al elemenot raíz del componente.