如何将 element-ui 组件二次封装，让代码更优雅？

element-ui 因其组件丰富、可拓展性强、文档详细等优点成为 Vue 最火的第三方 UI 框架。element-ui 其本身就针对后台系统设计了很多实用的组件，基本上满足了平时的开发需求。 既然如此，那么我们为什么还要进行二次封装呢？ 有以下两种场景 在日常的开发过程中，部分模块重复性比较强，这个时候就会产生大量重复的代码。这些模块的样式基本上是比较固定的，而且实现的功能也比较相近。如果每个地方都复制一份相似的代码，既不遵守代码的简洁之道，也不利于后期的维护修改 此外，在一些业务背景下，产品可能会要求设计新的交互。这个时候也可以基于 element-ui 进行二次开发，将其封装成一个新的组件方便多个地方使用 因为在日常开发过程中，项目主要以 Vue2 为主，并且现在很多公司仍在使用着 Vue2。故本文主要探讨 Vue2 + element-ui 的项目可以怎么封装一些比较通用化的组件 核心思想 主要以父组件传递数据给子组件来实现一些功能，子组件定义固定的展示样式，将具体要实现的业务逻辑抛出来给父组件处理 尽量保持 element-ui 组件原有的方法（可以使用 v-bind="$attrs" 和 v-on="$listeners"）,如果确实要做更改也尽量让相似的方法方法名不变 组件 InputNumber el-input-number 是一个很好用的组件，它只允许用户输入数字值。但是这个组件会有个默认值，给他赋予一个null 或""的时候会显示0 这对于有些业务来说并不是很友好，例如添加页面和编辑页面 并且它这个组件的值是居中显示的，和普通的input 框居左显示不同，这就导致了样式不太统一 改造：让 InputNumber 可以居左显示且没有默认值，用法保持和el-input-number组件相似 子组件 InputNumber.vue <template> <el-input-number id="InputNumber" style="width: 100%" v-model="insideValue" v-bind="$attrs" :controls="controls" v-on="$listeners" /> </template> <script> export default { // 让父组件 v-model 传参 model: { prop: 'numberValue', event: 'change', }, props: { numberValue: { type: [Number, String], default: undefined, }, // 默认不显示控制按钮，这个可以根据实际情况做调整 controls: { type: Boolean, default: false, }, }, data () { return { insideValue: undefined, }; }, watch: { numberValue (newVlalue) { // 若传入一个数字就显示。