ElementUi走马灯的自适应图片的高度

ref 有三种用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

<!-- 走马灯 开始 -->
    <div class="carousel">
       <!-- 下面的 :height="bannerHeight + 'px'" 是绑定数据 -->
      <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 这是个关键字 不清楚看官网文档  -->
            ref="bannerHeight"
            class="bannerImg"
            <!-- 下面的 @load 是加载事件 -->
            @load="imgLoad"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
<!-- 走马灯 结束 -->

窗口第一次打开，加载了imgLoad（）方法，第一次获取图片在视口中的高度，然后渲染到页面
接下来通过addEventListenner（）方法监听视口是否发生改变，如果发生改变，重新调用imgLoad()方法渲染数据到页面，这样图片高度就可以随视口改变发生改变，适应各种大小屏幕。

methods: {
    // 下面的 imgLoad 是页面渲染完成的加载方法，确保屏幕中的图片的高度第一次渲染到页面。
    imgLoad () {
      this.$nextTick(() => {
        this.bannerHeight = this.$refs.bannerHeight[0].height
        console.log(this.$refs)
      })
    }
  },
// 下面是增加监听事件，当视口发生变化的时候，得到此时图片的高度赋值给 bannerHeight
  mounted () {
      this.imgLoad()
      window.addEventListener('resize', () => {
          this.bannerHeight = this.$refs.bannerHeight[0].height
          this.imgLoad()
      }, false)
  }

请求本地图片需加require.png