vue2.0组件代码优化整理

Question

//组件1
 Vue.component('auto-list', {
            template: '#autoListText',//不同
            data: function () {
                return {
                    lists: [],
                    limit: 5
                }
            },
            props: {
                page: {
                    type: Number,
                    default: 1
                },
                catid: {
                    type: Number,
                    default: 20
                },
                loading: {
                    type: Boolean,
                    default: false
                }
            },
            created: function () {
                this.getList()
            },
            methods: {
                getList: function () {
                    $("#loading").removeClass('hide');
                    projectModel.getList(this.catid, this.page, this.limit, this.getData)
                },
                getData: function (data) {
                    var _this = this;
                    if (data.code == 1) {
                        if (!common.isNullOrEmpty(data.info)) {
                            var page = parseInt(data.info.pages.page);
                            var pagecount = parseInt(data.info.pages.pagecount);
                            $.each(data.info.list, function(i,item){
                             _this.lists.push(item);
                            });
                            NProgress.done();
                            if(page == pagecount){
                                this.$emit('restload', true);
                            }else{
                                this.$emit('restload', false);
                            }
                        }
                    }
                }
            },
            updated: function () {
                $("#loading").addClass('hide');
                timer.loadStartTimer();//不同
                timer.loadCircliful();
            },
            watch: {
                page : function () {
                    this.getList();
                }
            }
        });
    

//组件2

    Vue.component('stock-list', {
        template: '#stockListText',/不同
        data: function () {
            return {
                lists: [],
                limit: 5
            }
        },
        props: {
            page: {
                type: Number,
                default: 1
            },
            catid: {
                type: Number,
                default: 20
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        created: function () {
            this.getList()
        },
        methods: {
            getList: function () {
                $("#loading").removeClass('hide');
                NProgress.start();
                projectModel.getList(this.catid, this.page, this.limit, this.getData)
            },
            getData: function (data) {
                var _this = this;
                NProgress.done();
                if (data.code == 1) {
                    if (!common.isNullOrEmpty(data.info)) {
                        var page = parseInt(data.info.pages.page);
                        var pagecount = parseInt(data.info.pages.pagecount);
                        $.each(data.info.list, function(i,item){
                            _this.lists.push(item);
                        });
                        if(page == pagecount){
                            this.$emit('restload', true);
                        }else{
                            this.$emit('restload', false);
                        }
                    }
                }
            }
        },
        updated: function () {
            $("#loading").addClass('hide');
            timer.loadEndTimer();//不同
            timer.loadCircliful();
        },
        watch: {
            page : function () {
                this.getList();
            }
        }
    })
    

以上两个组件的代码非常相似，共同部分该如何优化合并最合理呢？

Answer 1

变化做成配置 封装成组件 传递参数

http://cn.vuejs.org/guide/com...

或者 http://cn.vuejs.org/guide/mix...