Propiedades de Instancias (Vue 2+)

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:

Elemento raíz: this.$el

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.

Propiedad this.$props

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:

• A través de this.$props.nombre para acceder al prop nombre.
• A través de 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.

Propiedad this.$data

De la misma forma que en el ejemplo anterior con los props, tenemos dos formas de acceder a los datos de un componente:

• A través de this.$data.nombre para acceder al prop nombre.
• A través de 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.

Propiedades estructurales

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:

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) o this.$children (componentes hijos) no están disponibles, por lo que es un patrón que es preferible no utilizar.

Otras propiedades

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.