项目的组件二次封装简单易上手 (数据驱动进阶(1) vue)

前端钢铁侠。

已于 2022-11-05 19:06:14 修改

阅读量1.1k

点赞数 3

分类专栏： Vue Eelement-UI 组件二次封装二次封装文章标签： vue.js 前端 javascript elementui html5

于 2022-11-05 18:49:27 首次发布

本文链接：https://blog.csdn.net/weixin_74956049/article/details/127706430

版权

本文介绍了在Vue项目中进行组件二次封装的背景和意义，旨在减少代码冗余，提高开发效率并便于后期维护。通过样式统一，如在Element UI表单组件基础上规定全局样式，并使用::v-deep进行特定样式修改。文章还详细阐述了数据驱动的表单二次封装过程，包括封装渲染逻辑和数据方法，以及如何从父组件向子组件传递数据。

摘要由CSDN通过智能技术生成

一.二次封装的背景

当项目当中有大量重复的样式,布局,就可以使用二次封装组件来减少项目的代码的冗余,提高开大的效率,方便后期的维护,降低维护成本.

二.样式统一

以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