从另一个组件触发窗口调整大小事件侦听器 - Vuejs

Question

我创建了两个组件Component1和Component2 。 在Component1中，我注册了窗口resize事件（每当页面调整大小时，它都会被触发）。 我想从Component2调用这个resize事件。

组件1：

export default {
    name: 'Component1',
    async mounted() {
       window.addEventListener('resize', this.windowResize);
    },
    methods: {
       windowResize() {
          console.log("Window Resize event called")
       }
    }
};

组件2：

export default {
    name: 'Component2',
    methods: {
       doResize() {
         // Need to invoke Component1 Resize from here
       }
    }
};

注意：这些不是通过根 vue 实例连接的。

我尝试了以下但没有奏效，

组件1：

mounted() {
    this.$root.$on('Component1', () => {
        // your code goes here
        this.windowResize()
    }
}

组件2：

...
doResize(){
 this.$root.$emit('component1') //like this
},

请帮我弄清楚这一点。

Answer 1

methods: {
  dispatchWindowResize() {
    window.dispatchEvent(new Event('resize'))
  }
}

在该组件内调用this.dispatchWindowResize()将在 window 对象上调度一个新的window.resize事件，该事件将运行从任何源添加到它的所有侦听器，包括应用程序中其他组件添加的侦听器。

文档：

• 调度事件
• 事件

测试：

 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 />接收所有调整大小事件：通过调整浏览器窗口大小触发的事件和通过单击<Emitter />内的按钮触发的事件