代码在：https://github.com/lizhongzhen11/myStudy/blob/master/vue/listDetails.vue

需求

      老板要求师傅以及其他同事在vue基础上封装一套页面生成模板,这样以后新来的直接往里面传传数据页面就出来了,跟以前老板自己在ext上封装的功能一样,只是以前的那套模板太丑了,弄了几年终于要更新了。
      前台页面这边一开始只是师傅一个人写,但是可能忙不过来,顺带着让我历练下给我扔过来几个页面,要求做成组件形式。其中有一个列表详情页要求调函数传参页面就自动生成。
      在给我讲需求时告诉了我从extends入手。遂进入了开发思考过程,本篇用来记录过程及所学。

过程

      首先打开vue官网,查找extends方法,寥寥数语,没懂。但是注意到了一点：
这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。
      既然不懂,那继续百度找前辈们的讲解呗。
      先是找到了这里：https://segmentfault.com/a/1190000010095089 ,看了一下貌似不是我需要的。我连怎么用都不知道呢,更别谈区别了。之后又找到了 http://blog.csdn.net/xuanwuziyou/article/details/78018857 这里,大概看到了点怎么用的方式,然后动手实践吧。

1
2
3
4
5
6
7
8
9

import listDetails from './components/listDetails'
export default{
    extends: listDetails,
    data() {
        return {
                listDetails: []
        }
    },
    ...

      一开始我没import,控制台直接报错,说listDetails未定义。后来import了,后台不报这个错了。
      继续看需求,要求传数据动态生成页面。也就是说,数据应该在使用了extends方法的页面上传入。但是,怎么传递呢？
      我一开始在使用了extends方法的页面上定义了set和get方法,然后打算在mounted()里面调用方法进行传递,当然,data()里预先定义了用于保存所有数据的listDetails属性。当然,被extends的模板里也有对应的属性名。
      然后,我发现控制台不报错了,页面上也有东西了,但是通过v-for循环listDetails而能展示的内容却并没有展示。遂打印了this发现listDetails为undefined!!!
      这下我就一筹莫展了。。。也不记得想了多久,看了下老板封装的模板,貌似子组件定义的方法在父组件里都有迹可循,很多方法在父组件里只是声明但是没有内部实现。回到我的问题上,那我是不是也需要在父组件上定义同名方法让子组件继承覆盖重写？
      遂动手实践,果然,在父组件里也定义了set和get方法,页面能正常显示了。
      这里的extends有些类似java里面的继承,方法继承覆盖重写。

注意

      一开始我在纠结怎么通过v-for循环把每个变量名及值取到,因为后台传过来的数据一般都是属性名:属性值这种键值对形式,而v-for遍历后取数据一般都是item或者item.固定的属性名。可是这样就不好弄了啊。
      也纠结了一段时间,最终还是问了师傅,师傅告诉我后台接口传过来的是类似下面这种形式：

1
2
3
4
5
6
7
8
9
10

{
    isDisplay: '1',     // 控制显隐
    isPrint: '1',   
    isNull: '1',        // 是否为null
    isEdit: '0',        // 能否编辑
    colType: 'string',  // 数据类型
    colCode: 'visited', // 属性名
    colName: '访问编号', // 属性值
    type: 'input'
},

有专门的一张表对应上面的数据,这样的话传参就很好解决了。