vue中一個元件使用多個相同子元件自適應視窗變化問題

問題背景

1. 一個元件中用了兩次自定義的table元件
2. table元件中使用window.onresize監聽了瀏覽器視窗的變化，並做了自適應處理

產生的問題

由於window是個全域性變數，所以渲染第二個table元件時，會覆蓋第一個table元件的監聽事件，所以只有第二個table會自適應縮放

解決

在父元件中獲取兩個table子元件的dom,然activated周期函式中手動呼叫子元件的自適應函式 changeTableHeight，由於我使用了keep-alive，所以重新進入之前進過的頁面時，不會重新呼叫鉤子函式，activated例外，所以將window.onresize放在activated中，每次進入頁面時都會重新整理這個監聽事件

    activated() {
      //監聽視窗的變化放在 actived中，每次進入頁面時都會重新重新整理監聽函式
      //解決了在多個元件中同時使用window.onresize時，監聽失效問題
      //失效原因是進入當前頁面時，不執行其它鉤子函式（mounted,created等），未重新整理window.onresize事件
      this.$nextTick(() => {
        window.onresize = () => {
          return (() => {
            console.log("active")
            this.$refs.left.changeTableHeight()
            this.$refs.right.changeTableHeight()
          })()
        }
      })

    },
 

子元件中的自適應處理

如果父元件只使用一次有window.onresize的子元件，在父元件中就不需要重新監聽視窗大小的變化

1. 子元件activated鉤子函式

    activated() {
      //進入頁面時，計算表格的高度
      //由於在created鉤子函式中，頁面元素還未渲染
      //使用 $nextTick ,使元素渲染成功後執行函式
      this.$nextTick(() => {
        this.changeTableHeight()
        //視窗發生變化時觸發，重新計算頁面中表格的高度
        window.onresize = () => {
          return (() => {
            this.changeTableHeight()
          })()
        }
      })
    },
 

2. 自適應處理函式

methods: {
      //隨著瀏覽器視窗的高度，改變表格的高度
      changeTableHeight() {
        if (this.isAutoHeight) {
          let height = window.innerHeight
          // 視窗的高度 - 表格頂端距離介面頂端的高度 - 表格底部想要距離介面底部的高度（這個高度可以自己除錯）
          this.tableHeight = height - this.$refs.hTable.$el.getBoundingClientRect().top - this.$refs.hPage.$el.clientHeight - 45
        }
      },