在我们使用vue的开发过程中总会遇到这样的场景，封装自己的业务组件。

封装页面组件前要考虑几个问题：
1、该业务组件的使用场景

2、在什么条件下展示一些什么数据，数据类型是什么样的，及长度颜色等

3、如果是通用的内容，比如ajax数据交互部分肯定是一个通用性的东西，怎么数据请求作到通用，返回的数据分配出去又不会出错。

先看一个简单的例子：

APP中常用的一个场景，点开我的信息右箭头可做编辑，修改。

从下面的图中可以看出来，修改页面大同小异，完全可以用一个页面，避免建多个页面。

这边采用的方式是，通过传参判断。

第一步：在data里面定义好一段数据格式，用来循环遍历展示的。

第二步：给右箭头绑定点击事件，点击的时候 传入当前点击的哪个的信息，也就是item。

第三步：通过路由等方式跳转到下一个页面，并把点击信息通过参数的形式带过去。

下面就是编辑页面，也就是当前场景下小小的通用的业务组件的实现过程了。

从代码中我的标记中不难看出，这里使用了3个formT ，为啥不是一个呢，因为虽说编辑修改页面大同小异，但是头像修改和文本信息修改的方式是存在一定去别的，

而电话、邮箱使用的是文本框就可以了，而个人简介确实大段文字，要使用，富文本框的。

1、思路是这样的，通过路径传过来的参数标识判断，是点击修改头像过来的就展示修改头像的内容，否则是修改个人简介的则展示个人简介的文本框，如果都不成立，就展示通用的结构。

2、首先第一步，结构上使用的 editflag  标识 写在 computed 计算属性里面，然后结构上使用该属性，属性里面的内容是返回的是 参数的标识，也就是 头像，还是个人简介还是其他的。

3、然后我们看editItem 是哪里来的，是事先定义好在data里面的属性。

4、然后看这个属性的赋值是哪里来的，发现使用了watch监听了数据变化，当数据变化时赋值来的，

5、再看下 currpdata 哪里来的，发现是从 mixin模板里面来的，

看到这里也就是 watch 了一下pdata

3、然后就是 点击完成的时候 调用  editUserInfo 方法 处理修改的内容逻辑了。

editUserInfo() {    if (this.editflag == 'headImageSrc') {        if (this.files && this.files.length > 0 && this.files[0].storageid) {            this.$set(this.formdata, "l_brokerimage", this.files[0].storageid);        } else {            // if (!this.API.hsVerify.verifyNumber(this.formdata.l_brokerimage, "头像", null, "", 1)) {            //     return false;            // }            if (!this.formdata['l_brokerimage'] || this.formdata['l_brokerimage'] == '') {                this.API.modal.toast({                    message: "头像不能为空或未重新上传！",                    duration: 3                });                return false;            }        }    } else if (this.editflag == 'brokername') {        if (!this.formdata['c_brokername'] && this.formdata['c_brokername'] == '') {            this.API.modal.toast({                message: "修改的名称不能为空哦！",                duration: 3            });            return false;        }    } else if (this.editflag == 'mobile') {        if (this.formdata['c_mobile'] && this.formdata['c_mobile'] != '') {            var regMapMobile = /(^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$)/;            if (!regMapMobile.test(this.formdata['c_mobile'])) {                this.API.modal.toast({                    message: "只能是1开始的11位纯数字哦！",                    duration: 3                });                return false;            }        } else {            this.API.modal.toast({                message: "修改的电话不能为空哦！",                duration: 3            });            return false;        }    } else if (this.editflag == 'email') {        if (this.formdata['c_email'] && this.formdata['c_email'] != '') {            var regMapEmail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9_]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;            if(this.formdata['c_email'].length > 40){                this.API.modal.toast({                    message: "邮箱超出最大长度！",                    duration: 3                });                return false;            }            if (!regMapEmail.test(this.formdata['c_email'])) {                this.API.modal.toast({                    message: "邮箱格式不正确！",                    duration: 3                });                return false;            }        } else {            this.API.modal.toast({                message: "修改的邮箱不能为空哦！",                duration: 3            });            return false;        }        ;    }    this.hsHttp.ajax({        data: {            "method": "exeCallBOWithRetNotWrapper",            "_uc": "UC_SYSTEM_TMPDATA_SAVE",            commdata: JSON.stringify(this.commdata),            formdata: JSON.stringify(this.formdata)        },        success: (data) => {            let json = JSON.parse(data);            if (json && json.success == "1") {                if (this.editflag == 'headImageSrc') {                    if (this.files && this.files.length > 0 && this.files[0].storageid) {                        this.user.headImageSrc = this.API.getServer() + this.files[0].filesrc;                    }                } else {                    this.user[this.editflag] = this.formdata[this.formproperty]                }                let chgJson = {};                chgJson[this.editflag] = this.user[this.editflag]                this.postMessage("user.change", chgJson);                this.API.hsBack();            } else {                this.API.modal.toast({                    message: "修改失败",                    duration: 3                });            }        },        error: function (err) {            console.log(err);        }    });}

暂时记录下。。。