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

Question

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

我已经尝试了以下解决方案，但是没有运气：

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

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

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

Answer 1

我在Vue上学到的一个便宜技巧是，如果模板中需要安装模板时未加载的任何内容，则只需在模板上放置v-if：<template v-if="$refs">&nbsp; &nbsp;<div ref="div1" :style="{ maxHeight: getMaxHeight($refs.div1) }"></div></template>周围。乍一看可能很脏，但事实是，它可以完成工作，而不会增加额外的代码和时间，并避免了错误。此外，您的expandable-函数的代码长度也有小幅改进：const expandable = el => el.style.maxHeight =&nbsp;&nbsp; &nbsp; ( el.classList.contains('expanded') ?&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; el.children.map(c=>c.scrollHeight).reduce((h1,h2)=>h1+h2)&nbsp; &nbsp; &nbsp; &nbsp; : 0 ) + 'px';

Answer 2

制作直接在div元素上运行的自定义指令可能是您的最佳选择。您可以创建一个指令组件，例如：export default {&nbsp; name: 'maxheight',&nbsp; bind(el) {&nbsp; &nbsp; const numberOfChildren = el.children.length;&nbsp; &nbsp; // rest of your max height logic here&nbsp; &nbsp; el.style.maxHeight = '100px';&nbsp; }}然后只需确保将指令导入您计划使用的文件中，并将其添加到div元素中：<div ref="div1" maxheight></div>