Header Ads Widget

Ticker

6/recent/ticker-posts

Comunicación entre padres e hijos de VueJs

 

Hemos estado aprendiendo cómo funcionan los componentes y específicamente los componentes de un solo archivo en VueJs. En este tutorial, ampliaremos nuestro aprendizaje sobre los componentes en Vue al observar cómo ocurre la comunicación entre los componentes. Los componentes en sí mismos son geniales, ya que configuran piezas de código reutilizables donde podemos usar todas las funciones que proporciona VueJs. Ahora queremos construir conexiones entre esos componentes para que las acciones en un componente puedan actualizar un componente diferente en la aplicación. Nos centraremos en la comunicación de padre a hijo y de hijo a padre en este tutorial.


Comunicación entre padres e hijos en Vue

Para mover datos de un componente principal a un componente secundario en Vue, usamos algo llamado props . ReactJS también usa una convención similar para compartir datos. Props es la abreviatura de "propiedades" y se refiere a propiedades establecidas desde el exterior, como las del componente principal. Para decirle al componente secundario vue que recibirá datos desde fuera de su propia instancia, debe configurar elpropspropiedad en el objeto Vue del componente hijo. Esta propiedad contiene una matriz de cadenas, y cada cadena representa una propiedad que se puede establecer desde el padre. Tenga en cuenta que los accesorios son estrictamente para la comunicación unidireccional del padre al niño, y no desea intentar cambiar el valor de un accesorio directamente en el componente secundario. De lo contrario, obtendrá un error de algo como “Evite mutar un accesorio directamente, ya que el valor se sobrescribirá cada vez que el componente principal se vuelva a representar. En su lugar, utilice datos o propiedad calculada según el valor de la propiedad ".


El componente principal usa un enlace de atributo

Para pasar los datos desde el componente principal al componente secundario , ahora podemos visitar el componente principal y configurar un enlace de atributo que usa el mismo nombre que el accesorio del componente secundario. Tenga en cuenta que estamos dentro del componente principal, pero estamos renderizando un componente secundario usando su etiqueta personalizada de <child-card> . Es en esta etiqueta donde configuramos el atributo vinculado. Ahora, dado que estamos usando parentmessagecomo nombre de atributo, entonces en Child lo necesitaremos props: ['parentmessage']como accesorio. En nuestro Padre pasamos los datos usando <child-card :parentmessage="parentmessage"></child-card>.

ParentCard.vue


El componente hijo usa el propsobjeto

Entonces, en este fragmento a continuación, tenemos un componente Child que tiene una configuración de prop y un valor de cadena parentmessageen su matriz. Lo que esto indica es que parentmessagese puede configurar desde el exterior o desde el componente principal. Eso es exactamente lo que estamos haciendo en la sección anterior. El nombre de cadena dado para el accesorio, en nuestro caso parentmessagedebe coincidir con el nombre de propiedad utilizado en la sección de plantilla de este componente.
ChildCard.vue


Demostración de accesorios de comunicación de padres a hijos

Así que veamos este pequeño código en acción. A continuación tenemos el componente padre ParentCard.vue renderizado y un componente hijo ChildCard.vue anidado En el niño, usamos a v-ifpara mostrar condicionalmente una alerta con un mensaje del padre. Si no hay ningún mensaje, no mostramos la alerta. Entonces, cuando la página se procesa por primera vez, el valor inicial de parentmessagees solo una cadena vacía. Podemos ver esto en el data()método del componente principal. Por eso, al principio, el componente Niño no muestra ningún mensaje de alerta. Sin embargo, si el usuario hace clic en el botón "Enviar un mensaje al niño" en el componente principal, se sendMessage()activa una función. Esto establece elparentmessagevariable a "<b> Mensaje del padre: </b> Haga su tarea". Dado que esta variable está vinculada al niño que usa :parentmessage="parentmessage", y el componente secundario acepta ese valor a través de accesorios: ["parentmessage"], entonces el componente secundario se actualiza con el mensaje de alerta "Mensaje del padre: haz tu tarea". ¡Muy genial!

Comunicación de niño a padre en Vue

¿Qué hay de ir en la otra dirección? ¿Cómo podemos comunicarnos de un componente secundario a un componente principal en VueJS? Para esto, podemos emitir un evento personalizado en el componente secundario y escuchar ese evento emitido en el componente principal. Agreguemos un poco de marcado a nuestro código de demostración existente para crear un evento personalizado.


El niño emite un evento personalizado

En primer lugar, en la sección <template> del componente secundario, agregaremos un controlador de clic de @ click = ”ok” así.
ChildCard.vue

Lo que esto dice es que cuando hacemos clic en el botón Aceptar, queremos ejecutar un método llamado ok()Configuremos ese método para emitir un evento personalizado cuando se active. Pasamos una cadena de 'terminado' a la función $ emit. Podemos elegir cualquier nombre que queramos, pero esto tiene sentido en nuestro caso. Queremos enviar un mensaje del niño a los padres de que hemos terminado.

ChildCard.vue


El padre escucha el evento personalizado

Ahora podemos volver al componente principal y donde hacemos uso de la etiqueta personalizada <child-card>, ahora podemos adjuntar un detector de eventos para nuestro evento personalizado usando @ terminado = ”terminado” . Esto significa que vamos a querer ejecutar una finished()función dentro del componente principal. Tanto el oyente personalizado como la función que desencadena se resaltan aquí.

ParentCard.vue


Demostración de evento de emisión de comunicación de niño a padre

En esta demostración, primero haga clic en el botón "Enviar un mensaje al niño". Eso envía el mensaje al componente secundario y lo muestra junto con un nuevo botón. Ahora, podemos hacer clic en el botón "Aceptar" y emite ese evento personalizado "terminado". En el Padre, estábamos escuchando ese evento personalizado y al escucharlo activamos la función finalizado () para establecer la parte parentmessageposterior en una cadena vacía. Finalmente, todo vuelve a renderizarse y volvemos al punto de partida. Ahora tenemos al padre enviando mensajes al niño y al niño respondiendo, así como al niño enviando mensajes al padre y al padre respondiendo. ¡Frio!


Comunicación de niño a padre a través de la función de devolución de llamada

Hay otra forma de enviar un mensaje al padre desde el hijo si no desea emitir un evento personalizado. Lo que podría hacer es en lugar de definir el método ok () en el niño, puede definirlo en el padre. Una vez que se define en el padre, puede pasar otro accesorio del padre al hijo. Entonces, lo que tenemos aquí en el archivo ParentCard.vue es el método ok () definido y resaltado, y el enlace en la <child-card> definido y resaltado.
ParentCard.vue

Ahora tenemos que actualizar nuestro propscomponente secundario. Lo que esto hace es habilitar el paso de una función de devolución de llamada del padre al hijo a través de accesorios. Podemos configurar eso así.
ChildCard.vue

La interacción entre el padre y el hijo es la misma que antes cuando emitíamos un evento personalizado. Puede usar la opción que le parezca más fácil, pero parece que emitir un evento personalizado es la más popular de las dos formas de comunicarse desde un componente secundario a un componente principal.


Resumen de comunicación entre padres e hijos de VueJs

Aprendimos un poco sobre cómo se produce la comunicación entre padres e hijos de VueJ en una aplicación durante nuestro tutorial del componente de formulario de VueJSEn este tutorial, simplificamos las cosas eliminando el backend de Laravel y centrándonos específicamente en un entorno puramente Vue donde estudiamos cómo se usan los accesorios para enviar información de un padre a un niño, y cómo los eventos personalizados se usan generalmente para comunicarse de un niño a un padre en VueJS.


Publicar un comentario

0 Comentarios