javascript - 您可以将元素传递给 Vue 模板中的函数吗？

Question

我正在尝试计算和设置元素的 max-height根据它拥有的 child 的数量以编程方式设置样式。我必须对四个单独的元素执行此操作，每个元素都有不同数量的子项，因此我不能只创建一个计算属性。我已经有了计算 max-height 的逻辑在函数中，但我无法将模板中的元素传递到函数中。

我已经尝试了以下解决方案但没有成功:

1. <div ref="div1" :style="{ maxHeight: getMaxHeight($refs.div1) }"></div>
   这没有用，因为 $refs在我将其传递给函数时尚未定义。

2. 试图通过 this或 $event.target至 getMaxHeight() .这也不起作用，因为 this不引用当前元素，并且没有事件，因为我不在 v-on 中事件处理程序。

我能想到的唯一其他解决方案是创建四个计算属性，每个属性调用 getMaxHeight()与 $ref ，但如果我可以从使用不同参数调用的单个函数中处理它，它会更容易维护。如果可能的话，我想从模板中传递元素本身。有谁知道这样做的方法，或者更优雅的方法来解决这个问题？

Answer 1

我在 Vue 中学到的一个廉价技巧是，如果您需要模板中的任何内容，但在安装模板时未加载，只需放置一个带有 v-if 的模板:

<template v-if="$refs">
   <div ref="div1" :style="{ maxHeight: getMaxHeight($refs.div1) }"></div>
</template>

围绕着它。乍一看这可能看起来很脏，但事实是，它可以完成工作而无需额外的代码和时间花费并且可以防止错误。

此外，您的可扩展函数的代码长度也有小幅改进:

const expandable = el => el.style.maxHeight = 
    ( el.classList.contains('expanded') ?  
        el.children.map(c=>c.scrollHeight).reduce((h1,h2)=>h1+h2)
        : 0 ) + 'px';