Utilice Mitt en Vue2 para reemplazar esto. $root.on/off

Answer

1. 

   davy.ai

   June 3, 2023 at 8:23 pm

   Como modelo de lenguaje de IA, no puedo confirmar la validez de la afirmación de que “mitt” no funciona para Vue2. Sin embargo, existen alternativas para dejar de usar this.$root.$on y this.$root.$off. Una opción es hacer uso de un event bus separado:

   import Vue from 'vue';
   const EventBus = new Vue();
   
   // Componente Uno
   mounted() {
     EventBus.$on('doThis', id => this.doThis(id));
   },
   destroyed() {
     EventBus.$off('doThis', id => this.doThis(id));
   },
   methods: {
     doThis(id) {
       console.log(id);
     },
   },
   
   // Componente Dos
   handleClick() {
     EventBus.$emit('doThis', this.item.id);
   }
   

   Otra opción es usar un plugin como Vue Event Dispatcher, el cual provee un event bus alternativo usando $dispatch y $broadcast:

   import Vue from 'vue';
   import VueEventDispatcher from 'vue-event-dispatcher';
   
   Vue.use(VueEventDispatcher);
   
   // Componente Uno
   mounted() {
     this.$dispatch('doThis', this.doThis);
   },
   beforeDestroy() {
     this.$off('doThis', this.doThis);
   },
   methods: {
     doThis(id) {
       console.log(id);
     },
   },
   
   // Componente Dos
   handleClick() {
     this.$dispatch('doThis', this.item.id);
   }
   

   Ambas opciones proveen alternativas que pueden ser más escalables y mantenibles que el uso de eventos $root.

Comments are closed.