在vuejs组件中添加window.resize事件不能独立工作

Question

我有一个具有调整大小事件的图像幻灯片组件

imageSliderComponent.vue

methods: {
 resize: function () {
   console.log(this.$el)
   // Handle window resize
   // Code
 }
}
mounted () {
 window.onresize = this.resize
}

在父组件中，我在多个地方使用这个图像滑块，像这样

应用程序.vue

<image-slider :data="data1" />   // Slider 1
<image-slider :data="data2" />   // Slider 2

因此，当我尝试调整窗口大小时，window.resize 事件仅适用于最后出现的组件（即滑块 2）。对于第一个组件（滑块 1），调整大小方法不起作用。

有没有办法独立处理可重用组件的调整大小？请建议是否有任何其他不同的实现。

Answer 1

您onresize每次都会重写处理程序，这只会导致最后安装的组件起作用。

您需要改为使用addEventListener：

mounted () {
 // You probably also want to call .bind as otherwise the `this` will not point to the component
 this._boundedResize = this.resize.bind(this); // Store in a var in order to remove it later
 window.addEventListener("resize", this._boundedResize);
}

destroyed() {
 window.removeEventListener("resize", this._boundedResize);
}