组件封装最佳实践

前置内容 本文起始于这篇我给公司封装的组件帮公司提效了60%｜ 8月更文挑战，文章标题有点夸张了，确实有点标题党嫌疑。最大的问题还不是标题，文章内容确实也有点虚，不过继续阅读这篇文章之前还是建议小伙伴

前置内容 在公司开发中或多或少都会有几个管理系统的项目，而对于这些系统大多页面都是表单、表格组成，为了不花费太多精力在这些不那么需要定制化的页面上，一般都会选择去用组件库完成，这个时候就如果将这些简单

对于Vue的双向绑定大家一定不陌生，入门基础的东西为啥要提？因为这是封装组件的基础！ 这里提出一个问题👇 不妨试试你的基础😏

$scopedSlots插槽名称对应的是render函数这种设计是更加合理的，所以在Vue3中$slots也设计成了对象里面插槽名称对应的是渲染插槽内容的render函数

对于动态请求的文件，我们可以使用`import()`，所以我们需要去改动一下render函数那块，这里也有一个点需要注意，render函数中不能去写任何异步操作

对于插槽解析这一块我们需要注意一下，官方文档对于render函数写slot没有列子，对于怎么去实现这一块也写的很晦涩，需要注意的是render函数中的第三个参数是描述当前组件的子内容，虽然slot是当

接上篇文章👉手把手教你玩转render函数「组件封装-dynamic-select」 Select Slots提供了`prefix/empty`这两个内置插槽，所以我们基于`el-select`

先来看下效果👇上面展示了select组件的两种很常见的使用常见１．表格的过滤(根据项目过滤数据)２．表单的使用(基于项目来创建单据)组件用例先给份用例了解下组件大致提供那些功能支持格式化选项数据自定义