Element ui轮播图自适应+Cannot read property ‘height’ of undefined报错处理

在element-ui中轮播图carousel组件容器的高度是固定写死的，想要达到自适应的效果 需要用:height 将高度动态绑定。
特此声明：此方法是我在网上搜的并在其基础上做了一定改进，原文在此
原文讲解的比较详细。所以我没有再做过多的赘述。并在最后加上了我遇到问题以及处理方法。

1.template html代码

<div class="boxdiv" >
      <el-carousel indicator-position="outside" :height="autoHeight+'px'">
        <el-carousel-item v-for="item in img" :key="item.id">
          <div>
            <img :src="item.src" ref="image" @load="getAutoHeight" class="carousel_image_type">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

2.获取图片按高度并监听浏览器resize变化

当调整浏览器窗口的大小时，发生 resize 事件。

resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

mounted () {
    this.getAutoHeight();
    //增加监听事件，窗口变化时得到高度。
    window.addEventListener('resize',this.getAutoHeight,false)
},
methods:{
    //自动获取图片高度，并赋给轮播图
    getAutoHeight(){
        this.$nextTick(()=>{
            this.autoHeight=this.$refs.image[0].height
        })
    }  
}

3.加载时方法渲染

在HTML代码中,绑定加载事件。@load=“getAutoHeight”

<img :src="item.src" ref="image" @load="getAutoHeight" class="carousel_image_type">

4.页面报错

经过以上操作后在有轮播图的页面可以正常使用，但是在没有图片的页面会报错：

TypeError: Cannot read property ‘height’ of undefined

方法一：为什么我在这个页面监听的方法，跳转到下个页面还在监听，这本就不合理。其实是因为我们没有在销毁组件时移除监听。window全局对象依然存在，所以仍然存在监听。

mounted () {
      this.getAutoHeight();
      window.addEventListener('resize',this.getAutoHeight,false)
    },
//销毁组件时移除监听
destroyed(){
      window.removeEventListener("resize",this.getAutoHeight,false);
    },

方法二：

类似的错误还有很多，大多都是 TypeError: Cannot read property ‘xxx’ of undefined

出现这种错误的原因很简单，就是你调用该方法或函数的字符串或数组、对象等等出现了为空的情况，加一个判断就好了。

    mounted () {
      window.addEventListener('resize', () => {
        let isImg =this.$refs.image;
        //判断该页面是否存在图片
        if(isImg){
          this.autoHeight = isImg[0].height
        }
      }, false)
    },

建议用方法一。