如何获得子组件的高度？

Question

试图通过Vue.js制作滑块

具有这样的结构

<slider>
    <slide> 1 </slide>
    <slide> 2 </slide>
    <slide> 3 </slide>
</slider>

在父组件中，我已经通过$ slots捕获了幻灯片。 Вродительскомкомпоненте（滑块）получаюслайдычерез$ slots。

标准的 translate 动画没有问题。但是，如果我想在幻灯片中添加 fade 动画，我必须：

.slider {
position: relative;
}

.slide {
position: absolute;
top: 0;
left: 0;
}

因此，我必须将父元素的高度设置为等于最高幻灯片。

尝试在已安装的挂钩中执行此操作：

mounted() {

this.slides.forEach((item) => {
  console.log(item.elm.clientHeight);
})

}

但是它说像：

幻灯片1的高度：1559 slide2高度：1915年 slide3高度：2371

但是实际高度是：

幻灯片1的高度：431 slide2高度：315 slide3高度：347

Answer 1

安装的挂钩不能保证孩子会被安装。我必须在

中设置一个高度

mounted() {

this.$nextTick(() => {
  // code
})

}

Answer 2

MDN is a good resource。

尝试一下。

eventFilter