一.二次封装的背景
当项目当中有大量重复的样式,布局,就可以使用二次封装组件来减少项目的代码的冗余,提高开大的效率,方便后期的维护,降低维护成本.
二.样式统一
以element表单为例子, 在一个项目当中样式要全局统一 一致,让用户看起来有序整齐 ,样式可以再当前组件内规定一个标准,全局一致就行,如果有组件样式不一致的话可以再在当前组件利用 ::v-deep 进行穿刺修改样式 为什么要进行穿刺呢 当你在组件内部使用 scoped 这个属性的时候 就需要用到穿刺才能对子组件进行样式修改.
三.数据驱动
1.表单的二次封装
(1).表单组件封装渲染逻辑 ,暴露数据方法 给父组件,
<template>
<div class="use-main">
<div class="use-top">
<el-form
ref="resetForm"
:inline="true"
:model="topForm"
:rules="rules"
class="use-form"
size="mini"
>
// 接收表单 传递的数据 进行渲染ui界面 使用 v-if进行判断 ,注意此处不能使用 v-show,看项目需求
进行封装input类型尽量多搞几个
<template v-for="(item, index) in formDataParams">
<el-form-item
v-if="item.type === 'input'"
:key="index"
:label="item.label"
:prop="item.model"
>
<el-input
v-model="topForm[item.model]"
class="use-input"
:placeholder="item.placeholder"
/>
</el-form-item>
<el-form-item