Instancias de componentes en vue
Tags: vue
Published: 2023-10-13 13:18:14

Imagina que estás construyendo una casa con bloques de construcción. Cada bloque es como un componente en Vue. Cada uno tiene su propia forma y función especial.

- Una instancia de componente en Vue es como una casa que estás construyendo con esos bloques. Es una versión específica y completa de esa casa, con sus propias características y personalidad.
- Cada instancia de componente se comporta como una casa diferente, aunque estén hechas de los mismos bloques básicos. Puedes personalizar cada casa con diferentes colores, tamaños y estilos, al igual que puedes personalizar las instancias de componentes en Vue con diferentes datos y lógica.

| Característica | Propiedades de instancia de componentes |
|:-----|------:|
| Descripción | Son atributos o datos que pertenecen a una instancia de componente Vue. |
| Uso | Se utilizan para almacenar y acceder a datos específicos dentro de un componente. |
| Declaración y asignación | Se pueden declarar e inicializar en el bloque data de un componente o mediante asignación directa dentro de los métodos. |
| Reactividad | Las propiedades de instancia reactivas se actualizan automáticamente cuando cambian sus valores. |
| Alcance de la instancia | Son específicas de cada instancia de componente, lo que significa que no se comparten entre diferentes instancias de componentes. |
| Acceso desde componentes hijos | Pueden pasarse como props a componentes hijos para permitir el flujo descendente de datos. |

En resumen, las instancias de componentes en Vue son como casas únicas que construyes usando los mismos bloques básicos de Vue, pero con personalizaciones y funcionalidades específicas para cada una.

## Propiedades de instancias

- **$el**: Se refiere al elemento HTML real al que Vue está vinculado. *Es como la dirección física de una casa, indica dónde Vue está presente en el DOM.*
- **$props**: Representa las propiedades pasadas a un componente desde su componente padre. *Son como los argumentos o datos que se pasan a una función en la programación.*
- **$data**: Contiene los datos internos de un componente. *Es como una caja que contiene todas las variables y estados que un componente utiliza para su funcionamiento.*
- **$options**: Contiene las opciones de configuración y propiedades de un componente. *Es como el manual de instrucciones que detalla cómo se debe configurar y comportar un componente.*
- **$slots**: Se utilizan para permitir que el contenido sea pasado desde el componente principal al componente hijo. *Son como áreas designadas en un formulario donde se puede insertar información adicional.*
- **$refs**: Se utilizan para acceder a elementos del DOM o componentes hijos desde un componente padre. *Son como etiquetas o marcadores que ayudan a referenciar y acceder a elementos específicos.*
- **$attrs**: Contiene los atributos no reconocidos pasados a un componente. *Son como atributos HTML adicionales que se pasan a un componente personalizado y que no se reconocen como props.*

|Propiedad | Descripción | Uso y Aplicación|
|:-----|:-----:|------:|
|$el|Hace referencia al elemento DOM real al que está vinculado una instancia de componente.|Útil para acceder directamente al elemento DOM relacionado.|
|$props|Contiene las propiedades pasadas al componente desde su componente padre.|Se utilizan para transferir datos del componente padre al componente hijo.|
|$data|Contiene los datos del componente, definidos en el componente como una función que devuelve un objeto.|Se utiliza para almacenar y manipular datos específicos del componente.|
|$options|Contiene las opciones de inicialización del componente, incluidos los hooks, métodos y otros atributos.|Útil para acceder a las opciones y propiedades definidas del componente.
|$slots|Proporciona acceso a los contenidos entre las etiquetas de apertura y cierre de un componente en su componente padre.|	Utilizado para renderizar contenido dinámico dentro del componente.|
|$refs|Proporciona acceso a los elementos del DOM o instancias de componentes dentro de un componente.|Se utiliza para acceder directamente a elementos del DOM o componentes hijos.|
|$attrs|Contiene los atributos no reconocidos (no props) pasados a un componente, útil en componentes de nivel superior que pasan atributos a componentes hijos.|Utilizado para acceder a los atributos no reconocidos pasados al componente.