在 vuejs 中安装“之前”获取子 DOM 元素高度答案

【问题标题】：Get childrens DOM element height 'before' it´s mounted in vuejs在 vuejs 中安装“之前”获取子 DOM 元素高度
【发布时间】：2021-04-24 03:06:51
【问题描述】：

在一个 Vuejs 应用程序中，我有一个组件 A，它管理组件 B 的实例。当 A 挂载时，它会遍历一个列表，从中创建 B 组件。当它迭代时，A 创建了一个 B 的新实例，然后它需要知道 B 模板中特定 div 元素的高度，然后 B 才真正安装到 DOM 中（是的，我知道）。 A 然后根据高度决定如何处理 B 实例。

我尝试了这种方法，其想法是将 B 实例安装到 DOM，如果它太高，然后将其删除：

答：

for(let i = 0; i < bData.length; i++) {
    const bInstance = new B();
    this.bInstances.push(bInstance);
    this.$nextTick(() => {
        const height = bInstance.getHeight();
        if(height < 100) {
            //...
        } else {
            //...
        }
    });
}

乙：

getHeight() {
    const divContent = this.$refs.divContent;
    return divContent.clientHeight;     
}

我这里有两个问题；首先，我需要等待第一个 B 实例被安装以知道高度，然后 A 继续下一个 B 项目。有点像等待功能。但是循环当然不会等待 netTick 完成。其次，调用B的getHeight函数时，$refs对象为空？如果我在 B 中的挂载函数中设置超时，则 $refs 可用。怎么会？

我想我没有正确解决问题。有什么想法吗？

【问题讨论】：

太高了为什么要去掉？无论如何，如果你想这样做，你可以在 B 组件的 props 中添加一个布尔值，然后在 A 组件中创建 B 组件时将其绑定到 A 组件中的 prop 也可以循环遍历 B 组件中所需的数据在A组件中挂载时直接在带有vueJs v-for属性的div中，它可以更轻松地处理数据和属性

标签： vue.js dom

【解决方案1】：

我通过在临时列表中创建 B 实例来解决问题，然后将它们挂载到 DOM 中的临时 div 中。然后 A 通过 refs 遍历 B 并记下那里的高度。从那里我可以丢弃临时 div，A 现在可以在知道每个 B 元素的高度后继续它的过程。

【讨论】：