Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introducción

Vue 3 presenta la API de composición, que aporta nueva flexibilidad y potencia a la comunicación de componentes.

Conceptos básicos de comunicación de componentes

Definición y función de los componentes.

En el desarrollo front-end, los componentes pueden considerarse como unidades independientes que crean una interfaz de usuario. Encapsula funcionalidades y estilos específicos, se puede reutilizar y se puede desarrollar y probar independientemente de otras partes. La función principal de los componentes es mejorar la reutilización, mantenibilidad y escalabilidad del código. Al dividir la interfaz en múltiples componentes, los desarrolladores pueden administrar más fácilmente aplicaciones complejas y cada componente se puede optimizar para mejorar la eficiencia general del desarrollo y el rendimiento de las aplicaciones.

Árbol de componentes y relación de componentes padre-hijo

En marcos de front-end como Vue.js, los componentes se pueden anidar para formar un árbol de componentes. En esta estructura de árbol, cada componente puede tener subcomponentes, y estos subcomponentes pueden tener sus propios subcomponentes, formando una estructura jerárquica. Esta estructura deja clara la relación entre los componentes y facilita la gestión y el mantenimiento.

• Relación del componente padre-hijo : En el árbol de componentes, un componente puede crear otro componente. En este caso, el creador se denomina componente principal y el componente creado se denomina componente secundario. Los componentes principales pueden pasar datos y métodos a los componentes secundarios, y los componentes secundarios pueden enviar información a los componentes principales a través de eventos. Esta relación padre-hijo es la base de la comunicación de componentes.
• Relación del componente hermano : Varios componentes secundarios bajo el mismo componente principal son relaciones de componentes hermanos. Los componentes hermanos no pueden comunicarse directamente entre sí y, por lo general, la comunicación entre ellos debe transmitirse a través del componente principal.
• Relaciones entre componentes de antepasados ​​y descendientes : En el árbol de componentes, el componente principal del componente principal es el componente ancestro y el componente secundario del componente secundario es el componente descendiente. Esta relación es especialmente importante cuando se trata de componentes profundamente anidados.

Los conceptos de árboles de componentes y relaciones entre componentes padre-hijo son cruciales para comprender la comunicación de componentes. Dominar estos conocimientos básicos puede ayudar a los desarrolladores a diseñar e implementar mecanismos de comunicación entre componentes de manera más efectiva.

Comunicación del componente padre-hijo (Vue 3)

El padre pasa datos al niño (Props)

¿Qué son los accesorios?
Los accesorios son un mecanismo para que los componentes principales pasen datos a los componentes secundarios.En Vue 3, usedefinePropsLa API se utiliza para declarar accesorios de recepción, lo que mantiene el flujo de datos unidireccional y garantiza la independencia y reutilización de los componentes.

Cómo pasar accesorios en el componente principal
En la plantilla del componente principal, utilicev-bindo abreviatura:Para vincular datos:

<template>
   <ChildComponent :my-prop="parentData" />
</template>

aquí,:my-propIndica que se trata de un accesorio vinculado dinámicamente,parentData¿Están los datos definidos en el componente principal?。

Cómo recibir accesorios en el componente secundario
En el componente secundario, usedefinePropsPara declarar los accesorios recibidos:

<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
   myProp: String
});
</script>

existir<script setup>En azúcar sintáctico,definePropsExpondrá automáticamente los accesorios como propiedades de respuesta del componente.。

El niño pasa el evento al padre (Emitir)

que es emitir
Emitir es un mecanismo para que los componentes secundarios envíen mensajes a los componentes principales.En Vue 3, usedefineEmitsAPI para declarar eventos que se pueden emitir y usaremitfunción para desencadenar eventos.

Cómo desencadenar un evento en un componente secundario
En el método del componente secundario, use defineEmits para declarar eventos que se pueden emitir y utilizar emit para desencadenar:

<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['my-event']);
 
function triggerEvent() {
   emit('my-event', dataToPass);
}
</script>

defineEmitsse utiliza para declarar eventos que un componente puede emitir, mientras queemitLas funciones se utilizan para desencadenar estos eventos.

Cómo escuchar los eventos del componente secundario en el componente principal
En la plantilla del componente principal,usarv-ono abreviatura@ Para escuchar eventos emitidos por componentes secundarios:

<template>
   <ChildComponent @my-event="handleEvent" />
//或者<ChildComponent v-on:my-event="handleEvent" />
</template>

aquí,@my-eventIndica que el subcomponente de escucha emitemy-eventevento,handleEventEs un método definido en el componente principal. Cuando se activa el evento, se llamará a este método.

Ejemplo completo

Supongamos que hay un componente principal.ParentComponenty un subcomponenteChildComponent, el componente principal debe pasar datos al componente secundario, y el componente secundario debe notificar al componente principal después de una operación específica.

componente principalParentComponent.vue

<template>
   <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
</script>

SubconjuntoChildComponent.vue

<template>
   <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
</script>

En este ejemplo, el componente principal pasa:my-propPasar datos a componentes secundarios y pasar@child-event Escuche los eventos emitidos por los componentes secundarios.pases de componentes secundariosdefinePropsRecibe el contenido pasado por el componente principal.myPropy usarlo en el evento de clic del botónemitEnviar datos al componente principal.

Usando Pinia (biblioteca de administración estatal para Vue 3)

Ventajas y características de Pinia

Pinia es la biblioteca de administración de estado recomendada oficialmente para Vue 3. Proporciona una forma basada en componentes de administrar el estado de la aplicación. Estos son algunos de los beneficios y características clave de Pinia:

• API de componentes: Pinia adopta API basada en componentes, lo que hace que la separación de la gestión del estado y la lógica de los componentes sea más natural.
• Compatibilidad con mecanografiado: Pinia ha considerado la compatibilidad con TypeScript desde el principio, lo que permite una mejor inferencia de tipos y compatibilidad con el editor al desarrollar con TypeScript.
• Modular: Pinia le permite dividir el estado en varias tiendas, y cada tienda puede administrar de forma independiente su propio estado y lógica.
• Compatible con API compuesta: Pinia está perfectamente integrada con la API de composición de Vue 3, lo que hace que la separación de la gestión del estado y la lógica de los componentes sea más natural.
• Depuración de viajes en el tiempo: Pinia proporciona capacidades de depuración de viajes en el tiempo, lo que permite a los desarrolladores retroceder e inspeccionar fácilmente los cambios de estado.

Cómo configurar y utilizar Pinia

Para comenzar a usar Pinia, primero necesitas instalar Pinia:

npm install pinia

O usar hilo:

yarn add pinia

Luego, configura Pinia en tu aplicación Vue:

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

Crear una tienda:

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

Utilice almacenar en el componente:

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

Integración de Pinia con componentes.

La integración de Pinia con componentes es muy sencilla, principalmente a través dedefineStore Función para crear una tienda. En componentes, puedes usar directamente el estado y los métodos en la tienda:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
</script>

En el ejemplo anterior, accedemos directamente en la plantilla.countpara mostrar el valor del contador y llamarlo en el evento de clic del botónincrementMétodo para incrementar el valor del contador.

Método de comunicación único de Vue 3.

Proporcionar/Inyectar

Uso básico de Proporcionar/Inyectar
En Vista 3,provideyinjectEs un método de comunicación entre componentes padre e hijo que permite a un componente ancestro inyectar una dependencia en todos sus componentes descendientes, independientemente de cuán profunda sea la jerarquía de componentes.

• Proveer información: Uso del componente ancestralprovideLas funciones proporcionan datos.
• inyectar datos: utilizado por componentes descendientesinjectLa función inyecta datos.

Escenarios aplicables para Proporcionar/Inyectar
provideyinjectAplicable a los siguientes escenarios:

• Cuando desea evitar pasar por múltiples capaspropsal pasar datos.
• Cuando desee que varios componentes del árbol de componentes compartan datos.

Código de muestra：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Teletransportarse

El concepto y uso de Teleport.
TeleportEs un nuevo componente integrado en Vue 3 que le permite "transmitir" una parte de la plantilla dentro de un componente a cualquier otra ubicación en el DOM.

Cómo utilizar Teleport para la comunicación de componentes
Teleport No se utiliza para la comunicación entre componentes, sino para controlar la posición de renderizado de los componentes.pero puedes usarTeleportSe logra un método especial de comunicación al representar partes de un componente en el DOM del componente principal.

Código de muestra：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

API de composición

Introducción a la API de composición
Vue 3 presenta la API de composición, que proporciona una nueva forma de organizar y reutilizar la lógica.aprobarsetupLas funciones permiten a los desarrolladores controlar de manera más flexible el estado de respuesta y el ciclo de vida de los componentes.

Utilice ref y reactivo para la comunicación entre componentes
refyreactiveEs una herramienta en la API de composición para crear datos receptivos.

• refReferencias reactivas para crear tipos de datos básicos.
• reactiveReferencia reactiva para crear tipos de objetos.

Uso de proporcionar e inyectar en la API de composición
En la API de composición,provideyinjectadmisiblesetupSe utiliza en funciones para lograr la comunicación entre componentes.

Código de muestra：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

A través de estos métodos de comunicación únicos de Vue 3, los desarrolladores pueden organizar de manera más flexible la comunicación entre componentes y mejorar la capacidad de mantenimiento y reutilización del código.

Resumir

Vue 3 presenta la API de composición, que aporta nueva flexibilidad y potentes funciones a la comunicación de componentes. La comunicación de componentes es la clave para crear interfaces de usuario complejas en el desarrollo front-end. Implica la transferencia de datos y la activación de eventos entre componentes principales e secundarios, componentes hermanos y componentes ancestros y descendientes. Vue 3 proporciona una variedad de métodos de comunicación, incluidos accesorios y emisiones tradicionales, así como las nuevas API Provide/Inject, Teleport y Composition.

Información relacionada recomendada

• Documentación oficial de Vue 3：Vue.js - El marco de JavaScript progresivo | Vue.js- La documentación oficial es el recurso más autorizado para aprender Vue 3, e incluye guías detalladas y referencias de API.
• Tutorial de la API de composición de Vue.js 3：Preguntas frecuentes sobre la API de composición | Vue.js- Tutorial oficial de la API de composición para ayudarte a comenzar rápidamente.
• Documentación oficial de Pinia.：Pinia | La tienda intuitiva para Vue.js- Si planea utilizar Pinia para la gestión estatal, la documentación oficial de Pinia es el mejor recurso de aprendizaje.
• Tecnología Vue.js revelada：Prefacio | Tecnología Vue.js revelada- Este es un proyecto que analiza en profundidad el mecanismo interno de Vue.js, lo que ayuda a comprender cómo funciona Vue.

La creación no es fácil. Si este artículo te ayuda, ¿puedes darme un me gusta?