什么是vue组件？公共组件封装要注意哪些事项？

1、组件是什么？

答：组件是包含数据、逻辑功能、展现样式的代码片段。

2、封装公共组件要注意哪些事项？

答：1）可读性。公共组件是团队协作的基础，可读性就显得尤为总要，怎么增加组件的可读性呢？首先组件命名要语义化，大家看到组件就一目了然，知道该组件的功能是啥；其次我们组件要有一个清晰明了的注释，演示组件用例，属性、参数、方法说明，让大家几乎不用动脑就可以完美使用。

/**
 * 表格筛选器组件
 *
 * 使用说明：
 * 1，导入组件：import TableFilter from "~/components/sizer/TableFilter.vue"
 * 2，注册组件：components: {TableFilter}
 * 3，渲染：<TableFilter :listSizer="listSizer" :listPrmt="listPrmt" @ichub="search"></TableFilter>
 *
 * 属性说明：
 * :listSizer：Array 过滤器基本配置项
 * :listPrmt：Object 过滤参数对象
 * @ichub: function 点击ichub按钮过滤事件--参数：Object 当前过滤参数对象
 *
 * 数据说明：
 * listSizer: [{  /过滤器基本配置项数据
 *      type: "text", //输入框类型：text普通输入框，select下拉输入框，date时间选择输入框
 *      placeholder: "型号", //输入框提示
 *      name: "sku_name", //绑定的字段名与listPrmt里面的键对应
 *      key: "f_sku_name", //循环唯一标识key
 *      width: "g-width-15" //输入框站筛选器的宽度（百分比）
 *  }]
 *//**
 * 表格筛选器组件
 *
 * 使用说明：
 * 1，导入组件：import TableFilter from "~/components/sizer/TableFilter.vue"
 * 2，注册组件：components: {TableFilter}
 * 3，渲染：<TableFilter :listSizer="listSizer" :listPrmt="listPrmt" @ichub="search"></TableFilter>
 *
 * 属性说明：
 * :listSizer：Array 过滤器基本配置项
 * :listPrmt：Object 过滤参数对象
 * @ichub: function 点击ichub按钮过滤事件--参数：Object 当前过滤参数对象
 *
 * 数据说明：
 * listSizer: [{  /过滤器基本配置项数据
 *      type: "text", //输入框类型：text普通输入框，select下拉输入框，date时间选择输入框
 *      placeholder: "型号", //输入框提示
 *      name: "sku_name", //绑定的字段名与listPrmt里面的键对应
 *      key: "f_sku_name", //循环唯一标识key
 *      width: "g-width-15" //输入框站筛选器的宽度（百分比）
 *  }]
 */

2）逻辑功能合理性。封装公共组件要设计好组件功能，看哪些功能需要在组件内完成，哪些功能需要暴露给父组件。我们一般的设计原则是，能在组件内完成的功能，尽量不要暴露给父组件处理。

3）数据设计的合理性。哪些数据需要父组件传进组件，哪些数据是组件自身拥有，哪些数据要输出给父组件一定要条理清晰。设计原则：组件自身除了必要的数据，一般不携带大量私有数据，尽量由父组件输入，处理完后根据业务场景决定是否需要输出。

4）样式的一致性。首先组件样式风格要和网站整理风格一致；其次组件在不同地方，不同空间展示样式尽量保持一致，不要变形。

5）可扩展性。我们封装公共组件基本可以满足我们百分之80到90的业务场景，但是一些个性化话的场景，需要组件的大部分功能，但是又有新的需求，这时候再开发一个新的组件没有必要，那么我们就要在原有组件的基础上加功能。这是时候我们就要用到插槽slot来做好预留，来增强组件的扩展性。

以上就是个人对于这两个问题的简单看法，欢迎大家留言补充指正。