Vue实现递归数组的渲染及增删操作

主要涉及组件自调用实现渲染，js实现递归数组的增删

老规矩，还是先看效果

效果图.png

• 这块主要分了几个组件来实现：连接线、卡片、连接线+卡片（含自身嵌套，这个组件就是调用了前面连接线和卡片的组件，大家可以合在一起）、父组件调用，以及通过eventBus实现增加、删除操作

连接线这块比较简单，不需要的跳过

下面看一下卡片这部分，涉及业务内容，我用id代替了卡片内容（此处id也作为唯一key值在组件间传递）

下面就是连接线+卡片组件，前面准备工作都做好了，这个组件就比较简单（嵌套自身通过本身组件的name实现）

最后就是父组件调用啦

这样就好啦~~~

• PS: 附一下eventBus的代码吧

import Vue from 'vue'
export default new Vue()