如今数据驱动视图的框架已经成为前端开发的主流,如 react、vue、angular 等,当然还包括我们用的 regular。这些框架大大提高了我们的开发效率,但同时现在的页面结构越来越复杂,虽然有这些 mv*的框架,但如果我们使用不当,也会造成状态数据管理混乱,代码难以维护的困扰。

因此组件化的思想就是为了提高开发效率和后期维护的效率。在做 SAAS 与腾讯企点合作的一个任务时候,遇到一个小问题.调用接口,在父组件里面完成,在子组件中通过 Props 获取.然后子组件的值修改更新通过$emit传达给父组件来更新.

什么是组件化

一个组件只做一件事,基于功能做好职责划分。

组件拆分原则

  • 原则:可复用、可组合;
  • 两大类:页面组件、功能组件 (基础组件,业务组件);

对组件的封装都是为了对数据逻辑业务的梳理,使得不同组件各司其职,即把大块的业务界面,拆分成若干小块,然后进行组装。当然这里不局限与 js,其实 css 同样适用(如 nec 规范)。

组件的划分

开始点击列表的分配账号,弹出框,调用一个借口,获取到相关的数据信息赋值给表单域.这个接口提供的是一套数据,包含两个表单域的一个对象,而对于两个表单模块,是拆分成两个子组件的.就需要进行数据的分离进行绑定.

组件的划分

这里对于表单数据的绑定有点问题.最后跟同事交流讨论了后,父组件里面共用一份数据绑定.到组件中绑定表单进行字段拆分.

<!--分配企点账号弹框 (division.vue)-->
<el-dialog class="mo-dialog" id="account-dialog" :title="`${qidianAccount?'编辑':'分配'}企点账号`" :visible.sync="qidianaccountVisible" width="780px">
            <el-row class="page-body" :gutter="40">
                <el-col :span="12">
                    <AccountInfoForm v-if="qidianaccountVisible" ref="qdaccountInfo" :qdData="qdData" @updateinfo="updateinfo"></AccountInfoForm>
                </el-col>
                <el-col :span="12">
                    <ShowInfoForm v-if="qidianaccountVisible" ref="showDatainfo" :qdData="qdData" @updateinfo="updateinfo"></ShowInfoForm>
                </el-col>
            </el-row>
            <div class="page-bottom">
                <el-button class="mo-button" plain type="primary" @click="closeqidianDialog">取消</el-button>
                <el-button v-if="qidianAccount" class="mo-button" type="primary" @click="onSubmit">保存</el-button>
                <el-button v-else class="mo-button" type="primary" @click="onSubmit">确认分配</el-button>

            </div>
</el-dialog>

表单组件加入v-if="qidianaccountVisible",显示的时候,才会渲染,然后才会执行子组件里面的 create 方法.(每次打开弹框都会执行),否则只会执行一次,里面绑定的值不会更新.

获取到员工信息后,进行赋值

//获取员工信息
getEmployeeInfo(id) {
    getEmployee({ id: id }).then(res => {
        const resData = res.data.data;
        this.qdData = res.data.data;
        this.qidianaccountVisible = true;
    });
},
<template>
    <div class="account-info-form">
        <header>
            <h3>企点账号信息</h3>
        </header>
        <el-form class="form" ref="qdform" :rules="rules" :model="qdaccountform" label-width="70px">
            <el-form-item prop="name" label="姓名">
                <el-input class="mo-input" v-model="qdaccountform.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item prop="sex" label="性别">
                <el-select class="mo-select block" v-model="qdaccountform.sex" placeholder="请选择">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="deptName" label="部门">
                <el-input class="mo-input" v-model="qdaccountform.deptName" placeholder="请输入" :disabled=true></el-input>
            </el-form-item>
            <el-form-item prop="mobile" label="手机号">
                <el-input class="mo-input" v-model="qdaccountform.mobile" placeholder="请输入"></el-input>
                <p class="tel-info">(用于接收企点账号和密码)</p>
            </el-form-item>
        </el-form>
    </div>
</template>

export default {
  props: {
    qdData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  watch: {
    qdaccountform: {
      handler(newVal) {
        this.$emit("updateinfo", this.qdaccountform);
      },
      deep: true
    }
  },
  data() {
    return {
      qdaccountform: {}
    };
  },
  created() {
    this.initFormdata();
  },
  methods: {
    loadOptions({ action, searchQuery, callback }) {},
    //将接口对象分离开,绑定不同的子组件.
    getFormfiles(obj) {
      var o = {},
        attr = Array.prototype.slice.call(arguments).slice(1);
      attr.forEach(function(val, index) {
        if (val in obj) {
          o[val] = obj[val];
        }
      });

      return o;
    },
    initFormdata() {
      //分离表单对象,接口所需要的字段值.
      this.qdaccountform = this.getFormfiles(
        this.qdData,
        "name",
        "sex",
        "deptName",
        "mobile"
      );
    },

    async sendqdaccountInfo() {
      //编辑保存和新增保存
      const valid = await this.$refs.qdform.validate();
      //新增企点用户
      if (valid) {
        return true;
      } else {
        return false;
      }
    }
  }
};

另外一个组件也是用相同的方法.(子组件表单域赋值分开,父组件传递共用一份数据.)