Vue 多组件 resize

最近开始研究web前端开发, 使用vue3 +  ts + element plus + echarts. 使用中遇到一个问题, 多个组件在窗口大小变更时 跟随 resize的问题.

网上搜 resize基本都是 window.onresize = () => {this._resize()} 这种办法... 但是使用时发现多个组件时, 只会有一个组件能实时更新大小.

出现这个问题也很容易理解, 因为 windows.onresize是全局的, 组件内部的重置接口只有最后一个执行（created/mounted）的能生效. 

解决办法:

1、 最开始是想的有没有什么组件内部可以注册onresize事件的办法，搜了一下，貌似没有。

2、然后就只能用原始办法了。 在所有需要实现resize功能的父窗口去重载 window.onresize， 在里面是对子组件 一 一 调用各自的 onresize方法。类似如下：

父页面创建组件时定义ref：

<onlinecot ref="onlinecotins"/>
<alivecot ref="alivecotins"/>
<newcot ref="newcotins"/>

在created或者mouted里实现window.onresize

  created () {
    window.onresize = () => {
      this.$refs.onlinecotins.resize()
      this.$refs.alivecotins.resize()
      this.$refs.newcotins.resize()
    }
  }

组件内部实现 resize方法：

  methods: {
    resize () {
      mychart.resize()
    }
  }

这样就可以解决多个组件resize的问题了。

前端小白，对vue的认识还不够深入，可能还有更好的办法，欢迎大神指教。

标签：Vue,created,refs,onresize,window,组件,resize
来源： https://blog.csdn.net/u013645668/article/details/122091455