0
693
ViewsVue3 - Comunicación entre dos componentes niños
Con Vue 3, tengo la siguiente estructura de componentes: 
Como puede ver, ChildA puede comunicarse con ChildB y ChildB debe poder cambiar su estado en consecuencia.
Con Vue 2, pude enviar un evento en ChildA :
this.$root.$emit('new-message', data) Y luego manejarlo en ChildB :
this.$root.$on('new-message', (data) => { this.state = data }) Pero desde Vue 3, se han eliminado $on , $once y $off . ¿Cómo puedo lograr esta comunicación en Vue 3?
1 answers
Answer question0
Si tiene un atributo de datos, en este ejemplo simplemente llamado data , entonces puede usar reactive para crear una tienda simple, que luego puede ser importada por ambos componentes hermanos (en este ejemplo, Componente A y B)
// store.js import { reactive } from 'vue' export const store = reactive({ data: 'New Message', setData(something) { this.data = something; }, }) <!-- ComponentA.vue --> <script> import { store } from './store.js' export default { data() { return { store } } } </script> <template>From A: {{ store.data }}</template>Y
<!-- ComponentB.vue --> <script> import { store } from './store.js' export default { data() { return { store } }, watch: { // If you need to trigger an event on change, then: 'store.data'(newData, oldData) { console.log('Data Changed', { newData, oldData }); } }, } </script> <template>From B: {{ store.data }}</template> Cuando el estado en la tienda se actualice, los cambios se reflejarán en todos los componentes secundarios que lo utilicen. Esto debería ser más simple que el patrón $emit de Vue 2, ya que no necesita administrar los eventos de seguimiento a través del árbol de componentes.