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. |
Top comments (0)