Vue如何获取子元素的宽高?

运用swiper4的高度自适应的轮播图,由于swiper-slide中的图片可能不同尺寸,因此会出现这种现象



如何获取每个img的高度呢?

this.$refs.swiperOptions.$children.map((item)=>{
console.log(item.$el.clientHeight);
});

后来发现人家写的没问题,不用动态更改高度了

把swiper作为一个组件使用,通过props传入的img数组,为啥图片出不来?

<template>
      <!-- swiper -->
      <swiper :options="swiperOption" style="height: auto">
        <swiper-slide v-for="(item,index) in slides" :key="index">
            <img :data-src="item.src" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </swiper-slide>
        
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
</template>
<script>
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name:"swipers",
    components: {
        swiper,
        swiperSlide
    },
    props:{
        slides:Array
    },
    data() {
      return {
        swiperOption: {
          lazy: true,
          autoHeight: true, //enable auto height
          spaceBetween: 0,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

<style scoped>
  .swiper-container .swiper-slide {
    background: #444!important;
    min-height: 200px;
  }
  .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
</style>