购物网站开发背景及目的,wps怎么做网页,东莞微网站,大连网络公司联系方式业务背景 在我们接触的项目中#xff0c;PC端的项目中基本上百分之60或以上#xff0c;都会用到表格#xff0c;我们最常用的 就是element-plus 组件库#xff0c;相信大家都对el-table 都比较熟悉了#xff0c;但是在许许多多大同小异的界面中#xff0c;每次都要写很多…业务背景 在我们接触的项目中PC端的项目中基本上百分之60或以上都会用到表格我们最常用的 就是element-plus 组件库相信大家都对el-table 都比较熟悉了但是在许许多多大同小异的界面中每次都要写很多重复的代码不仅容易出错而且效率不高。况且很多项目大都是时间紧、任务重、有时候需求变化频繁一改就是好几个界面。 那么我们能不能把这些重复的没有技术含量的工作抽离组件通过一个简单的json 配置就能实现这些功能岂不是就能早点下班了。
组件封装的原则
首先梳理组件的功能明确那些功能是要放进组件内的梳理出功能大纲功能大纲出来后需要考虑每个功能模块的使用方法怎样封装才能让使用者通过简单的配置就可以使用甚至可以让不会代码的人都能使用二次封装原有的事件和属性需要全部继承v-bind$attrs 和 v-on$listeners除了定制性的功能还需要有预留自定义的扩展功能 slot 和 modelValue命名需要做到见文知意封装的组件代码内部一定要遵循功能单一、可扩展等原则
需要掌握的技术
vue: slot插槽的使用、defineProps、defineEmits、defineExpose、wacth、computed
element-plus: el-table的使用、v-bind$attrs 和 v-on$listeners、el-pagination、el-upload、el-form等这里看封装的组件业务复杂程度不再展开
以封装表格组件为案例
第一步 梳理组件的功能大纲
