Vue.js中跨组件触发窗口resize事件监听器的方法

问题描述 #

创建了Component1和Component2两个组件，Component1中已注册window的resize事件，页面尺寸变化时事件会自动触发。需求为从Component2中主动触发Component1绑定的resize事件逻辑。

前置约束：两个组件并非通过同一个根Vue实例关联连接。

初始代码 #

Component1 初始代码 #

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

Component2 初始代码 #

export default {
    name: 'Component2',
    methods: {
       doResize() {
         // 待实现触发Component1 resize逻辑的代码
       }
    }
};

此前无效尝试说明 #

之前尝试通过$root事件总线实现通信未生效，核心原因有两点：

• 事件名大小写不匹配：Component1监听的事件名为Component1，Component2触发时用的是全小写的component1，Vue自定义事件大小写敏感，无法匹配
• 根实例不共享：两个组件不属于同一个Vue根实例，this.$root指向不同对象，事件无法跨实例传递
  无效实现代码如下：
  Component1 监听代码：

mounted() {
    this.$root.$on('Component1', () => {
        this.windowResize()
    }
}

Component2 触发代码：

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

可行实现方案 #

方案1：派发原生window resize事件（零侵入，优先推荐） #

Component1本身就是监听window对象的原生resize事件，直接在Component2中手动派发window的resize事件即可，无需修改Component1任何现有代码，触发效果和用户手动调整窗口大小完全一致。
仅需修改Component2的doResize方法：

doResize() {
  // 手动派发window原生resize事件
  window.dispatchEvent(new Event('resize'));
}

适用场景：需要完整触发所有绑定在window上resize逻辑的场景，无额外依赖，实现成本最低。 #

方案2：独立事件总线（精准触发目标组件逻辑） #

如果不希望触发全局所有window resize监听，仅需要触发Component1的对应逻辑，可创建独立于组件树的Vue实例作为事件总线，完全不依赖组件的根实例关联。

1. 新建独立事件总线文件eventBus.js

import Vue from 'vue';
// 独立通信实例，与所有组件的根实例解耦
export const eventBus = new Vue();

2. 修改Component1代码，添加总线事件监听，记得销毁时移除监听避免内存泄漏

import { eventBus } from './eventBus.js';
export default {
    name: 'Component1',
    async mounted() {
       window.addEventListener('resize', this.windowResize);
       // 监听总线自定义事件
       eventBus.$on('triggerC1Resize', this.windowResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.windowResize);
      eventBus.$off('triggerC1Resize', this.windowResize);
    },
    methods: {
       windowResize() {
          console.log("Window Resize event called")
       }
    }
};

3. 修改Component2代码，触发总线事件

import { eventBus } from './eventBus.js';
export default {
    name: 'Component2',
    methods: {
       doResize() {
         eventBus.$emit('triggerC1Resize');
       }
    }
};

注意：监听和触发的事件名必须完全一致（包括大小写、拼写），否则会出现事件不响应问题。 #

方案3：全局状态管理（适合中大型项目） #

如果项目已接入Vuex/Pinia等全局状态管理库，可通过维护一个全局的resize触发计数/标识位，Component1监听该状态变化执行resize逻辑即可，适合多组件共享通信状态的复杂场景。 #

内容的提问来源于stack exchange，提问作者MOHAMED AZARUDEEN