在开发的过程中，会发现有一些页面整体有着极大的相似度。如果每次做一个这页面，都要重新写布局的话，会特别的繁琐，而且由于不是一个人开发，在像素的控制以及布局习惯上，可能就会造成明明是相同的页面，但是看起来却各不相同，总是有一些细微的差别。而且，后期维护的时候，还会特别麻烦。
所以，为了避免重复造轮子，也为了能够提高自己的工作效率。秉持习大大要学会“想着懒”的思想，我决定将这个页面封装一下。将基础的布局和可能会用到的功能全部封装里面，并将接口抛出，以处理各个页面可能会存在的各种处理逻辑。
说做就做，首先我分析了一下这些页面的相似点和不同点，以便处理公用布局和个别页面会用到的布局。
相同点：
1.头部：都有NavBar导航栏以及搜索框。
2.身体：都是一条条的单据。
3.脚：底部按钮。
不同点：
1.导航栏title，搜索框关键字。
解决方案：父组件向子组件传值控制。
2.是否需要操作按钮、审核标识。
解决方案：操作按钮使用vant组件弹出层，因此需要用到父子组件数据双向绑定控制弹出层。
审核标识 是根据后端数据判断，需要给动态key值。
3.单据展示行数不同以及单据的展示内容不同。
解决方案：通过具名slot插槽实现，将内容放到父组件中。子组件中做好布局，父组件只填充内容。slot插槽除了占位还要传递参数，这里就用到了作用域插槽，父组件slote-scope负责接收参数。
在之前的工作中，我们已经将导航栏、搜索框封装成了一个组件，底部的按钮也封装成了一个组件。那么，现在只需要考虑身体的部分，即单据列表的展示。
通过上面三个图，可以知道公司的单条合同以及单据的布局是2行或者3行，且里面内容不一致。其次，个别页面底部没有Button，因此，内容盒子的最大高度需要根据场景去动态改变。
另外，管理单据按钮以及审核标识也是在不同场景下展示，也需要动态控制。
同时，需要考虑，客户的单据量是非常庞大的，一次性加载肯定会非常耗时，需要加上分页懒加载（分页懒加载使用vant组件，加载控制变量需要双向绑定）。
但是vue 父子组件传递是单项数据流。因此需要用到.sync实现父子组件数据双向绑定。同时，用了.sync后，子组件数据只能更新一次，需要监听数据，并手动赋值更新。
html代码：
props：
methods：
watch：
本次组件的封装，学习了作用域插槽、父子组件的双向绑定。同时，对于相同布局、特定布局的问题，有了一些其他的思考。即：scoped的使用。项目开始前，能够做好合理的规划，合理使用scoped，也可以在一定程度上节省css代码。不过，做一个时间跨度较长的产品，自己做相同的布局都有可能会有差异，更不用说是和同事一起去做。不仅仅html布局有差异，css，js逻辑也会因编码习惯而不同。
因此，通过这次组件的封装，可以至少提高我在后面的工作效率。
后续：
因为这类页面是固定的导航栏+搜索框+单据内容+按钮的，所以我是将所有的内容都封装在了一起的。
这样一来可复用性程度降低了，不过应该是可以提高我自己的工作效率的。
快就完事了！
本次封装如果有什么不足，还希望大佬给意见继续优化！
