如何在 Vuejs 中保持安装在 2 个组件中同时工作？

Question

我使用window.onresize mounted在 2 个不同的组件中。 当 window 改变大小时，它将运行window.onresize中的代码，但它只运行 1 个组件，而不是同时运行 2 个组件。

如何让它同时在 2 个组件中同时运行window.onresize ？

mounted() {
  window.onresize = () => {
    this.productDetailRatio = window.innerWidth / 1900;
    this.screenWidth = window.innerWidth;
    this.productDetailRatiofont =
      window.innerWidth / 1900 < 0.5 ? 0.5 : window.innerWidth / 1900;
  };
}

我在 2 个不同的组件中使用它，当我更改 window 大小时，我希望它都在 2 个组件中运行，但它只适用于 1 个组件。

Answer 1

我的意思是它的错误策略。 MDN 写道：

GlobalEventHandlers接口的onresize 属性是一个处理resize 事件的EventHandler。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

因此，当您的第二个组件已安装时 - window.onresize被重写

如果您想在 window 调整大小时更改组件中的某些内容，您可以使用“监视”方法https://v2.vuejs.org/v2/guide/computed.ZFC35FDC70D5FC69D2693883A822C75

您需要创建一个像 windowSize 这样的全局变量，当 window 被调整大小时，将新大小分配给 windowSize，并在组件中观察 windowsSize