Vue utiliza comúnmente tres métodos de comunicación de componentes: Props, Emit, Bus...

El concepto de comunicación de componentes:


De padre a hijo El padre
llama al elemento hijo y pasa datos a través de las propiedades del elemento hijo.

El componente principal pasa el atributo y el componente secundario lo recibe a través de accesorios, que se pueden usar en el componente secundario de esta manera.xxx.
El niño recibe internamente los datos correspondientes a través de accesorios.
hijo padre

El componente secundario envía un evento personalizado al componente principal a través de $emit (nombre de evento personalizado, parámetro), y la propiedad en el componente principal escucha el evento y se puede obtener el valor pasado del componente secundario.
Nota: Los datos en vue el valor predeterminado es un flujo unidireccional, solo se puede pasar directamente de padre a hijo, pero no se puede modificar directamente de hijo a padre.
Motivo: debido a que los datos de los padres no necesariamente son utilizados solo por un determinado niño, puede haber otros niños que también usen estos datos. Si el niño puede modificar los datos de los padres a voluntad, es fácil causar confusión en los datos.
Solución: Si el niño quiere modificar los datos, debe notificarlo al padre, después de recibir la notificación, el padre decide si desea modificarlos, que es el clásico hijo a padre.

Cada componente tiene su propio alcance y los datos entre componentes no se pueden compartir. Sin embargo, en el trabajo de desarrollo real, a menudo necesitamos compartir datos entre componentes. Este es también el propósito de la comunicación de componentes para permitirles comunicarse entre sí. , para formar un sistema orgánico completo.

Esquema de comunicación de componentes.

De padre a hijo: datos de transferencia de accesorios

        Pase datos a través de propiedades personalizadas dinámicas en el componente principal.

componente principal:   

 Subconjunto:

 Hijo a padre: $emitir transferencia

         Pase eventos personalizados a través de $emit en subcomponentes, seguido de los parámetros que se pasarán

 Subconjunto: 

componente principal: 

  • Los subcomponentes pasan $emit触发eventos personalizados y $emitel segundo parámetro es el valor pasado
  • El componente principal vincula al oyente para obtener los parámetros pasados ​​por el componente secundario.

Valor del pase hermano $Middleware de bus:

1. Cree un nuevo archivo js en el directorio src del proyecto vue (nombre de archivo: bus.js)

 2. Importe la instancia de Vue en bus.js y expórtela

 3. Traslado en bus.$emitir

 4. Utilice bus.$on para recibir este evento, recibir parámetros y recibir antes y después del montaje.

Supongo que te gusta

Origin blog.csdn.net/frelly01/article/details/126089138
Recomendado
Clasificación