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

【问题标题】：Trigger Window Resize Event Listener from another Component - Vuejs从另一个组件触发窗口调整大小事件侦听器 - Vuejs
【发布时间】：2022-07-06 23:54:23
【问题描述】：

我创建了两个组件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
},

请帮我解决这个问题。

【问题讨论】：

首先，您发出 component1 并监听 Component1。你能看出它们不一样吗

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

文档：

【讨论】：