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

Question

我正在尝试max-height根据其具有的子代数以编程方式计算和设置元素的样式。我必须在四个单独的元素上执行此操作，每个元素具有不同数量的子代，所以我不能只创建一个计算属性。我已经具有max-height在函数中计算的逻辑，但是我无法将元素从模板传递到函数中。我已经尝试了以下解决方案，但是没有运气：<div ref="div1" :style="{ maxHeight: getMaxHeight($refs.div1) }"></div>这没有用，因为$refs在将其传递给函数时尚未定义。试图通过this或$event.target到达getMaxHeight()。这也不起作用，因为this没有引用当前元素，并且没有事件，因为我不在v-on事件处理程序中。唯一的其他解决办法，我能想到的是创建四种计算的属性，每个属性调用getMaxHeight()与$ref，但如果我可以调用不同PARAMS单一功能处理它，它会更容易维护。如果可能的话，我想从模板传递元素本身。有谁知道这样做的方法，或者更优雅的方法来解决此问题？

Answer 1

我在Vue上学到的一个便宜技巧是，如果模板中需要安装模板时未加载的任何内容，则只需在模板上放置v-if：

<template v-if="$refs">

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

</template>

周围。乍一看可能很脏，但事实是，它可以完成工作，而不会增加额外的代码和时间，并避免了错误。

此外，您的expandable-函数的代码长度也有小幅改进：

const expandable = el => el.style.maxHeight = 

    ( el.classList.contains('expanded') ?  

        el.children.map(c=>c.scrollHeight).reduce((h1,h2)=>h1+h2)

        : 0 ) + 'px';

Answer 2

制作直接在div元素上运行的自定义指令可能是您的最佳选择。您可以创建一个指令组件，例如：

export default {

  name: 'maxheight',

  bind(el) {

    const numberOfChildren = el.children.length;

    // rest of your max height logic here

    el.style.maxHeight = '100px';

  }

}

然后只需确保将指令导入您计划使用的文件中，并将其添加到div元素中：

<div ref="div1" maxheight></div>