vue封装一个可处理表单的组件

一、需求。

最近在开发一个新系统，有很多功能以及表单需要处理，为了偷懒，想着封装一个组件统一处理下相关逻辑，这样下来，每个功能只需写一个列表查询的组件和一个表单组件，省时省心。
最终效果：

最终效果图

二、需要实现的点：

1、 增加、修改、查看三个功能都在这里进行处理
2、每个功能只需要写好表单以及对应事件，用该组件统一处理外部样式以及触发子组件中的表单事件（这里的表单作为子组件）
3、因为有左侧边栏的缘故，还需要动态调整宽度

三、具体实现

使用（列表查询组件）：

表单组件：

最终目录结构

总结：完成这样一套逻辑之后，对应功能节点只需要完成如图表单组件和列表查询组件，而且表单中只需处理数据，提示或者报错都放到drawer组件中进行处理，极大程度上保护了自己的头发。

另：有关事件总线不明白的地方可参考：Vue自动销毁的vue event Bus。