ref 有三種用法：
1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素
2、ref 加在子組件上，用this.ref.name 獲取到的是組件實(shí)例，可以使用組件的所有方法。
3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點(diǎn)

<!-- 走馬燈 開始 -->
    <div class="carousel">
       <!-- 下面的 :height="bannerHeight + 'px'" 是綁定數(shù)據(jù) -->
      <el-carousel :interval="5000" arrow="always" :height="bannerHeight + 'px'">
        <el-carousel-item v-for="item in imgUrl" :key="item.id">
          <img
            :src="item.idView"
            alt="我是輪播圖"
            <!-- 下面的 ref 這是個關(guān)鍵字 不清楚看官網(wǎng)文檔  -->
            ref="bannerHeight"
            class="bannerImg"
            <!-- 下面的 @load 是加載事件 -->
            @load="imgLoad"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
<!-- 走馬燈 結(jié)束 -->

窗口第一次打開，加載了imgLoad（）方法，第一次獲取圖片在視口中的高度，然后渲染到頁面
接下來通過addEventListenner（）方法監(jiān)聽視口是否發(fā)生改變，如果發(fā)生改變，重新調(diào)用imgLoad()方法渲染數(shù)據(jù)到頁面，這樣圖片高度就可以隨視口改變發(fā)生改變，適應(yīng)各種大小屏幕。

methods: {
    // 下面的 imgLoad 是頁面渲染完成的加載方法，確保屏幕中的圖片的高度第一次渲染到頁面。
    imgLoad () {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
        console.log(this.$refs)
      })
    }
  },
// 下面是增加監(jiān)聽事件，當(dāng)視口發(fā)生變化的時候，得到此時圖片的高度賦值給 bannerHeight
  mounted () {
      this.imgLoad()
      window.addEventListener('resize', () => {
          this.bannerHeight = this.$refs.bannerHeight[0].height
          this.imgLoad()
      }, false)
  }

請求本地圖片需加require.png