Instancias de componentes en vue

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.