javascript - 在同一页面上使用重复的 VueJS 组件，没有正确引用它自己的实例

Question

我构建了一个 VueJS 组件，并在同一页面上多次使用它。这些组件完美地彼此独立工作，但是组件中有一种方法可以获取它的 offsetWidth 并将其作为一个类(例如 width-800)应用到组件(带有前缀)。

当页面上只有一个组件时，它工作正常。

当有多个时，只有最后一次出现的应用类。它确实使用正确的宽度正确计算了类别，但只是没有将其应用于页面上的其他类别。

<template>
    <div id="app-medialib" v-bind:class="[this.breakpoint]">
        <p>{{ this.breakpoint }}</p>

this.breakpoint 是一个包含类名的数据属性。

mounted: function(){
  var self = this;

  this.calculateBreakpoint();

  window.onresize = function(event) {
      self.calculateBreakpoint();
  };
}

和断点方法:

calculateBreakpoint: function(){
    var mediaLibraryWidth = null;

    var elems = document.getElementsByClassName('header medialib');
    for( var i=0; i<elems.length; i++ ){
        if( elems[i].offsetParent !== null ){
            console.log('elems[i]', elems[i]);
            mediaLibraryWidth = elems[i].offsetWidth;
            break;
        }
    }

    console.log('calculateBreakpoint', mediaLibraryWidth);

    if( mediaLibraryWidth > 956 ) {
        this.breakpoint = 'md';
    } else if( mediaLibraryWidth < 957 && mediaLibraryWidth > 700 ){
        this.breakpoint = 'sm';
    } else {
        this.breakpoint = 'xs';
    }

    console.log('calculateBreakpoint', this.breakpoint);
},

对此非常感谢任何帮助。挠我的头已经有一段时间了。

谢谢。

Answer 1

当您执行 window.onresize 并将函数绑定(bind)到它时，先前的绑定(bind)会被覆盖，因此当您的应用程序中有多个组件时，它们的挂载函数将被调用，从而覆盖 window.onresize。这就是为什么只更改最后一个组件类的原因。

在您的控制台中尝试以下操作。

window.onresize = function (e) {
  console.log('a')
}

window.onresize = function (e) {
  console.log('b')
}

调整大小时，只会记录“b”。

结帐:What is the best practice to not to override other bound functions to window.onresize?

在您的情况下，使用 jquery 在 window.onresize 上绑定(bind)函数将是更好的方法。

尝试:

$(window).resize(function() {
 console.log('a')
})

$(window).resize(function() {
 console.log('b')
})

当您调整大小时，它会同时记录“a”和“b”。

因此将 window.onresize 更改为:

$(window).resize(function() {
  self.calculateBreakpoint();
})

或者按照 Daniel Beck 的建议，如果您想避免使用 jquery，请使用:

 window.addEventListener('resize', self.calculateBreakpoint )