Cuando trabajamos en una instancia o componente de Vue 2 (por ejemplo, en el interior de los métodos o en hooks del ciclo de vida), podemos utilizar el objeto this
, que no es más que una referencia al objeto de opciones de la Options API.
No sólo podemos utilizar this.title
para acceder a una prop, variable o propiedad computada, sino que también podemos acceder a una serie de propiedades internas de Vue (que comienzan por $
), las cuales nos proporcionan información interesante.
Son las siguientes propiedades internas:
Propiedades | Descripción |
---|---|
.$el |
Referencia al elemento raíz del <template> del componente/instancia. |
.$props |
Referencia a un objeto con los props del componente/instancia. |
.$data |
Referencia a un objeto con los datos de data en el componente/instancia. |
.$options |
Referencia al objeto de opciones de la Option API de Vue. |
.$slots |
Colección de referencias a slots. Ej: this.$slot.name() referencia a v-slot:name . |
.$refs |
Colección de ref . |
.$attrs |
Colección de atributos y eventos no reconocidos como props o custom events. |
Si queremos hacer referencia al elemento HTML raíz del <template>
, deberemos hacer referencia a la propiedad this.$el
. Ten en cuenta que dicha referencia sólo estará disponible a partir del hook mounted
del ciclo de vida. Si intentaramos acceder a esta propiedad en una fase previa del ciclo de vida, obtendremos null
.
Veamos un ejemplo:
<template>
<div>Ejemplo de ciclo de vida</div>
</template>
<script>
export default {
mounted() {
console.log("El elemento raíz del template es ", this.$el);
}
}
</script>
El console.log()
del hook mounted()
nos devolverá el elemento raíz del template, que es una referencia al elemento raíz del template, que en este caso es <div>
. Recuerda que <template>
sólo puede tener un elemento raíz en Vue 2, por lo que siempre devolverá un elemento.
Recuerda que los props de un componente, si están correctamente definidos en los props
de las opciones de la Options API, se puede acceder a ellos de dos formas:
this.$props.nombre
para acceder al prop nombre
.this.nombre
(proxy) que hace referencia al anterior.Veamos un ejemplo, definimos un componente BaseExample
:
<template>
<div>Componente {{ name }}</div>
</template>
<script>
export default {
name: "BaseExample",
props: {
name: String
},
mounted() {
console.log("Los props son accesibles en: ", this.$props.name);
console.log("O también (a través de un proxy) en: ", this.name);
}
}
</script>
Una vez hecho, utilizamos el componente de la siguiente forma:
<BaseExample name="info"></BaseExample>
Observa que en el mounted()
, al hacer referencia a this.$props.name
o this.name
, obtendremos la información del atributo name
de la etiqueta HTML del componente Vue.
De la misma forma que en el ejemplo anterior con los props, tenemos dos formas de acceder a los datos de un componente:
this.$data.nombre
para acceder al prop nombre
.this.nombre
(proxy) que hace referencia al anterior.Para ello, definimos un componente BaseExample
y creamos unos datos en la zona data()
:
<template>
<div>Datos del componente {{ author }}</div>
</template>
<script>
export default {
name: "BaseExample",
data() {
return {
author: "Manz"
}
},
mounted() {
console.log("Los datos son accesibles en: ", this.$data.author);
console.log("O también (a través de un proxy) en: ", this.author);
}
}
</script>
Observa que al utilizar tanto this.$data.author
como this.author
, obtendremos el valor de la variable author
. Ten en cuenta también, que en el caso de tener props y datos con el mismo nombre, podríamos tener conflictos usando la forma corta. Es por ello que nunca deben coincidir props, datos y propiedades computadas.
Existen ciertas propiedades específicas para acceder a la estructura de componentes. No son ideales para utilizar a largo plazo o gran escala, pero en proyectos muy pequeños o casos muy concretos, puede ser una buena solución para no aumentar la complejidad del componente:
Propiedades | Descripción |
---|---|
.$parent |
Referencia al componente padre del componente actual. |
.$root |
Referencia al componente raíz (referencia a la instancia de main.js ). |
.$children |
Referencia a un array de componentes hijos del componente actual. |
Por ejemplo, imaginemos el siguiente ejemplo donde tenemos un componente padre llamado App.vue
el cuál va a contener un componente hijo BaseBlock
:
<template>
<div>
<BaseBlock></BaseBlock>
</div>
</template>
<script>
import BaseBlock from "./components/BaseBlock.vue";
export default {
name: "App",
components: {
BaseBlock
},
data() {
return {
title: "Soy el componente App.vue"
}
}
}
</script>
Luego, dentro del componente BaseBlock.vue
tenemos una variable title
en la zona data
, la cuál obtiene su valor de la variable title
de su componente padre (es decir, el componente al que hacemos referencia con this.$parent
):
<template>
<div>
{{ title }}
</div>
</template>
<script>
export default {
name: "BaseBlock",
data() {
return {
title: this.$parent.title;
}
}
}
</script>
Ten en cuenta que en la mayoría de los casos, esta forma de acceder a información crea un acoplamiento muy grande entre componentes, y lo ideal sería optar por utilizar un Almacén de estados como VueX o un patrón de Bus de Eventos que pueden permitir gestionar mejor la información de forma global, y sobre todo, de forma más organizada, sin necesidad de acoplar componentes.
En
las referencias a propiedades estructurales como this.$parent
(componente padre),this.$root
(instancia raíz) othis.$children
(componentes hijos) no están disponibles, por lo que es un patrón que es preferible no utilizar.
De la misma forma que podemos acceder a props o datos, existen otras propiedades como this.$options
(para acceder al objeto de opciones de Vue), así como this.$slots
(acceso a slots del componente) o this.$refs
(referencias del componente).
Por otra parte, la propiedad this.$attrs
incorpora atributos indicados en el componente que no son props, así como eventos que no sean custom events.
Ten en cuenta que si vas a usar
y su Composition API en lugar de Options API, todo esto cambia sustancialmente. En ese caso, echa un vistazo al tema de la Composition API.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev