Instancia de componente Vue

En Vue.js, la instancia de componente es uno de los bloques de construcción más básicos de una aplicación Vue. Cada instancia de componente es un componente Vue que tiene su propia plantilla, datos, métodos y ganchos de ciclo de vida, y puede gestionar de forma independiente su propio estado y comportamiento. A continuación se presenta una introducción detallada sobre las instancias de componentes Vue:

Creación de una instancia de componente Vue

En Vue.js, crear una instancia de componente generalmente se logra mediante el método createApp y el objeto de opciones del componente.

El objeto de opciones del componente puede contener las siguientes propiedades:

  • data: Objeto de datos, utilizado para almacenar los datos reactivos del componente.
  • props: Matriz u objeto de propiedades, utilizado para recibir los datos pasados por el componente padre.
  • computed: Objeto de propiedades computadas, que realiza cálculos dinámicos según las dependencias reactivas.
  • methods: Objeto de métodos, que contiene las funciones y operaciones internas del componente.
  • watch: Objeto de observadores, utilizado para observar los cambios de datos y responder a ellos.
  • template: Cadena, define la estructura de la plantilla del componente.
  • render: Función, utilizada para renderizar el DOM virtual del componente.
  • setup: Función, utilizada para configurar el estado inicial, los datos, las propiedades computadas y los observadores del componente (en Vue 3).

A continuación se muestra un ejemplo de una instancia de componente Vue simple:

Ejemplo

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Greet</button>
    </div>
  `
});

app.mount('#app');

Explicación:

  • dataLa función devuelve un objeto que contienemessagelas propiedades, utilizado para almacenar el estado del componente.
  • methodsEl objeto contiene ungreetmétodo, cuando se hace clic en el botón aparece un cuadro de aviso que muestramessageel contenido de.
  • templateLa cadena define la estructura de la plantilla del componente, utilizando interpolación y enlace de eventos para lograr la visualización de datos y la interacción.

Ganchos de ciclo de vida

Las instancias de componentes Vue tienen algunas funciones de gancho de ciclo de vida que permiten a los desarrolladores ejecutar lógica personalizada en diferentes etapas del ciclo de vida del componente. Los ganchos de ciclo de vida comunes incluyencreated、mounted、updatedydestroyedetc.

Ejemplo

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});

Comunicación de componentes

Las instancias de componentes Vue se comunican mediante props, events, provide/inject, $parent/$children, $attrs/$listeners, etc., dependiendo de la relación y los requisitos de los componentes. Estos mecanismos permiten que los componentes transmitan datos y respondan a las interacciones del usuario entre diferentes niveles.

Propiedades de la instancia de componente

$data

La propiedad $data contiene todas las propiedades de datos de la instancia del componente. Es reactiva, es decir, cuando los datos cambian, las vistas relacionadas se actualizan automáticamente.

Ejemplo

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

const vm = app.mount('#app');
console.log(vm.$data); // { message: 'Hello, Vue!' }

$props

La propiedad $props contiene todas las propiedades (props) pasadas por el componente padre que recibe el componente actual. Es de solo lectura.

Ejemplo

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  }
};
</script>

Ejemplo

// ChildComponent.vue
export default {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 'Message from parent'
  }
};

$refs

$refs contiene todos los elementos DOM o instancias de componentes secundarios dentro del componente que tienen la característica ref. Se puede acceder a estos elementos o instancias de componentes mediante $refs.

Ejemplo

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // acceder al elemento DOM
this.$refs.inputField.focus(); // llamar al método del elemento DOM
  }
}
</script>

La propiedad $el representa el elemento DOM raíz de la instancia del componente actual. Esta propiedad solo se puede acceder después de que el componente esté montado.

Ejemplo

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');
console.log(vm.$el); // <div id="app">Hello, Vue!</div>

$attrs

$attrs contiene todas las propiedades pasadas por el componente padre al componente actual pero no declaradas en el componente hijo. Estas propiedades se pueden utilizar para pasar atributos adicionales no prop al componente hijo.

Ejemplo

<!-- ParentComponent.vue -->
<template>
  <child-component custom-attr="value"></child-component>
</template>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    console.log(this.$attrs); // { custom-attr: 'value' }
  }
};
</script>

$listeners

$listeners contiene todos los listeners (funciones de manejo de eventos) pasados por el componente padre al componente actual, y se pueden enlazar directamente al elemento raíz del componente u otros elementos.

Ejemplo

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Click me</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners); // { click: handleClick }
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

Métodos de la instancia de componente

$mount()

El método $mount() monta manualmente el componente Vue en un elemento DOM. En Vue 3, normalmente se monta automáticamente mediante createApp().mount(), y en algunos casos raros es necesario montarlo manualmente.

Ejemplo

const app = Vue.createApp({
  template: '<div>Hello, Vue!</div>'
});

const vm = app.mount('#app');

$destroy()

El método $destroy() destruye la instancia del componente actual, desvincula todos sus listeners de eventos y libera los recursos que ocupa. Es útil en ciertos escenarios, como cuando se crean y destruyen componentes dinámicamente.

Ejemplo

vm.$destroy();

$emit()

El método $emit() se utiliza para activar eventos personalizados en la instancia del componente actual y pasar datos al componente padre. Normalmente se usa junto con la directiva v-on.

Ejemplo

<button @click="$emit('custom-event', eventData)">Click me</button>

$nextTick()

El método $nextTick() ejecuta la función de retorno especificada después de que finalice el próximo ciclo de actualización del DOM. Se utiliza para realizar algunas operaciones después de que el DOM se haya actualizado.

Ejemplo

vm.$nextTick(() => {
  // Operación realizada después de que se complete la actualización del DOM
});

$watch()

El método $watch() se utiliza para observar los cambios de datos en la instancia del componente y ejecutar la función de retorno especificada cuando los datos cambian.

Ejemplo

vm.$watch('message', (newValue, oldValue) => {
  console.log(`Message changed from ${oldValue} to ${newValue}`);
});

Estas propiedades y métodos brindan a las instancias de componentes Vue una gran funcionalidad y flexibilidad, capaces de satisfacer las diversas necesidades de los desarrolladores al construir aplicaciones complejas, desde la gestión de datos hasta el manejo de eventos, pasando por la operación de componentes dinámicos, todo se puede gestionar y controlar a través de la instancia del componente.

Otras extensiones