He creado dos Componentes Component1 y Component2 . En el Component1 he registrado un evento de cambio de resize de ventana (cada vez que la página cambia de tamaño, se activa). Quiero invocar este evento de cambio de resize desde Component2 .
Componente1:
export default { name: 'Component1', async mounted() { window.addEventListener('resize', this.windowResize); }, methods: { windowResize() { console.log("Window Resize event called") } } };componente2:
export default { name: 'Component2', methods: { doResize() { // Need to invoke Component1 Resize from here } } };Nota: Estos no están conectados a través de la instancia de root vue.
He intentado lo siguiente pero no funcionó,
Componente1:
mounted() { this.$root.$on('Component1', () => { // your code goes here this.windowResize() } }componente2:
... doResize(){ this.$root.$emit('component1') //like this },Amablemente ayúdame a resolver esto.
methods: { dispatchWindowResize() { window.dispatchEvent(new Event('resize')) } } Llamar this.dispatchWindowResize() dentro de ese componente enviará un nuevo evento window.resize en el objeto de la ventana, que ejecutará todos los oyentes agregados desde cualquier fuente, incluidos los agregados por otros componentes en su aplicación.
Documentación:
Prueba:
const Emitter = Vue.defineComponent({ template: '#emitter-template', methods: { dispatchWindowResize() { window.dispatchEvent(new Event('resize')) } } }) const Receiver = Vue.defineComponent({ template: '<div></div>', mounted() { window.addEventListener('resize', this.logResize) }, methods: { logResize() { console.log(`window.resize: {w: ${window.innerWidth}, h: ${window.innerHeight}}`); } }, beforeDestroy() { window.removeEventListener('resize', this.logResize) } }) new Vue({ el: '#app', components: { Emitter, Receiver } }) <script src="https://v2.vuejs.org/js/vue.min.js"></script> <div id="app"> <receiver></receiver> <emitter></emitter> </div> <template id="emitter-template"> <button @click="dispatchWindowResize">Dispath window resize</button> </template> <Receiver /> recibe todos los eventos de cambio de tamaño: los activados al cambiar el tamaño de la ventana del navegador y los activados al hacer clic en el botón dentro de <Emitter />