需求分析：

如图，有很多高度不固定的模块（图中只显示两个，本人项目有十三个），点击模块标题展开相应的模块，再次点击此模块匿藏，如何实现此需求并实现复用？

点击红框前：

点击后：

难点分析:

模块高度不固定。比如，本人一开始想到的方法如下：

这种方法确实可以实现点击展开，再次点击收缩的需求，但是有一个明显的缺点：限定了容器的高度，也就是每个模块都需要固定高度，并不适用于需求场景。

解决方案：

1、实现一个函数式组件

2、引用此组件

在components中注册了此组件：

即可在teamplate中引用，请留意红框文字说明部分。

至此，Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。

实现效果：

总结

以上所述是小编给大家介绍的Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。