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
        }
      },