vue 中使用继承 页面共用

昔有朝歌夜弦之高楼，上有倾城倾国之舞袖。

在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的: 李大玄
我的CSDN: 李大玄
Example

产品提了一个需求，在系统中添加一个用户功能模块，需要实现添加、修改、查看功能

从设计图中看到的 ui 情况是创建与修改界面完全相同，区别在于修改时有表单中有默认的数据, 查看与编辑页面布局上差不多，区别是只读，没有保存按钮

在这里插入图片描述

目录结构

user
|- common.vue
|- create.js
|- edit.js
|- check.vue

创建用户

把创建与编辑的公共部分写到一个父类中，在父类中定义好两边都需要的方法或者属性
common.vue

create.js

/**
 * @file 创建用户
 * @author xxx
 */

// 引入基础模块
import Common from './common'

export default  {
  name: 'CreateUser',
  // 继承
  extends: Common,
  methods: {
    // 重写保存方法
    onSubmit() {
      // 在此处开发创建用户的业务逻辑
      console.log(this.$data.form)
    }
  }
}

编辑用户

编辑与创建很相似，代码也比较雷同，区别在于加载组件时需要从API中获取用户详情数据, 保存时与调用编辑用户API 接口

edit.js

/**
 * @file 编辑用户
 * @author xxx
 */

// 引入基础模块
import Common from './common'

export default {
  name: 'EditUser',
  // 继承
  extends: Common,
  created() {
    this.getUserDetails();
  },
  methods: {
    /** 获取用户详情数据 */
    async getUserDetails() {
      const user = {
        name: '张三',
        age: 20
      }
      setTimeout(() => {
        this.$data.form = user;
      });
    },
    // 重写保存方法
    onSubmit() {
      // 在此处开发编辑用户的业务逻辑
    }
  }
}

查看用户

上面介绍过，查看用户与编辑用户的功能有重合的部分，从用户角度分析区别是 ui 的布局, 这里我们在开发是则不在继承 common 模块，继承 edit 模块，重写 ui 部分

check.vue