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?
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.