需求分析：
如图，有很多高度不固定的模块（图中只显示两个，本人项目有十三个），点击模块标题展开相应的模块，再次点击此模块匿藏，如何实现此需求并实现复用？
点击红框前：
点击后：
难点分析:
模块高度不固定。比如，本人一开始想到的方法如下：
这种方法确实可以实现点击展开，再次点击收缩的需求，但是有一个明显的缺点：限定了容器的高度，也就是每个模块都需要固定高度，并不适用于需求场景。
解决方案：
1、实现一个函数式组件
2、引用此组件
在components中注册了此组件：
即可在teamplate中引用，请留意红框文字说明部分。
至此，Vue.js实现垂直展开、收缩不定高度模块组件实现完成及应用均已完成。
实现效果：
总结
以上所述是小编给大家介绍的Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
