学了点皮毛之后，由于项目中修改用户信息，商品页面，管理员信息页面大多一样，所以想写个组件来复用。
不过毕竟初学，手法还很稚嫩，其中大多功能托饿了么的福，用了element组件。少些很多还不太懂的代码。
大概原理：
通过父子组件互相传值，完成信息修改。通过父组件传递要修改的id，以及申请修改的请求来源。子组件接收值后，调用http请求获取数据（后台传回的数据格式有些要求，规定了所需验证方式），接到数据后，通过循环生成特定数量的输入框。
话说休繁，上代码。
父组件中绑定传值：
<el-button @click="handleView(scope.row)" type="text" size="small">修改</el-button>
<list-update :id='toChildId' @childToFather="clear_id" :transfer='transfer'></list-update> methods:{
handleView:function(row){
this.toChildId=row.id;
this.transfer="update_user"
},
clear_id:function(data){
this.toChildId='' ;
this.getnode();
}
},
扫描二维码关注公众号，回复：
2522691 查看本文章
因为信息列表中有很多项信息是通过循环出来的，通过点击修改按钮触发handleView函数改变toChildID的值，在这中发现了一个特别的属性，scope.row。很有用，会再开一个博客写。
clear_id方法是用来把toChildId置空，目的在后面说。
子组件代码如下：
<template>
<div class="list_update">
<el-dialog
title="修改信息"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form label-position="left" status-icon :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="id"
label="ID"
:rules="[
{ required: true, message: 'ID不可为空', trigger: 'blur' }
]"
>
<el-input v-model="dynamicValidateForm.id" disabled></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="domain.label"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="myrules[index]"
v-if="need_select.indexOf(domain.label)==-1"
>
<el-input v-model.number="domain.value" v-if="need_number.indexOf(domain.label)>=0"></el-input>
<el-input v-model="domain.value" v-else></el-input>
</el-form-item>
<el-form-item :label="domain.label" key="domain.key" :prop="'domains.' + index + '.value'" :rules="myrules[index]" v-else>
<el-select v-model="domain.value" placeholder="请选择职位">
<el-option v-for=" a in select_choose" :label="a" :value="a"></el-option>
<!-- <el-option label="会员" value="会员"></el-option> -->
</el-select>
</el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
<el-button @click="dialogVisible=false">返回</el-button>
</el-form>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name:'list_update',
props:{
id:{
type:String,
required:true
},
transfer:{
type:String,
required:true
}
},
data() {
return {
need_select:'',
need_number:'',
select_choose:'',
myrules:'',
dialogVisible: false,
dynamicValidateForm: {
domains: [],
id: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let id=this.dynamicValidateForm.id;
let come_from='list_update';
let update_table=this.transfer;
this.dynamicValidateForm.domains[0].value=encodeURI(this.dynamicValidateForm.domains[0].value);
let formDetail=JSON.stringify(this.dynamicValidateForm.domains)
this.$http.post(this.baseUrl+'myphp/message_update.php',{come_from:come_from,id:id,formDetail:formDetail,update_table:update_table},{emulateJSON: true}).then((response)=>{
console.log(response.body)
if(response.body==1){
alert("修改成功!")
this.dialogVisible=false
}else{
alert('修改失败!')
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
addDomain(value1,value2,value3) {
this.dynamicValidateForm.domains.push({
value: value2,
key: value3,
label:value1
});
}
},
watch:{
id:function(){
var checkNumber = (rule, value, callback) => {
if (!value&&value!=0) {
return callback(new Error('不能为空'));
}
setTimeout(() => {
if ( isNaN( value )) {
callback(new Error('请输入数字值'));
} else {
callback();
}
}, 500);
};
if(this.id!=''){
this.dynamicValidateForm.id=this.id
let id=this.dynamicValidateForm.id;
let come_from=this.transfer;
this.dialogVisible=true;
this.$http.post(this.baseUrl+'myphp/message_before.php',{come_from:come_from,id:id},{emulateJSON: true}).then((response)=>{
this.dynamicValidateForm.domains=[]
this.myrules=[]
this.need_number=response.body.need_number
this.need_select=response.body.need_select
this.select_choose=response.body.select_choose
for(var i=0;i<response.body.list.length;i++){
if(response.body.need_number.indexOf(response.body.list[i].label)>=0){
// console.log(typeof(Number(response.body.list[i].value)))
this.addDomain(response.body.list[i].label,Number(response.body.list[i].value),response.body.list[i].key)
this.myrules.push( [{
required: true, message: '不能为空', trigger: 'blur'
},
{
validator: checkNumber, trigger: 'blur'
}])
}else{
this.addDomain(response.body.list[i].label,response.body.list[i].value,response.body.list[i].key)
this.myrules.push([{
required: true, message: '不能为空', trigger: 'blur'
}])
}
}
})
}
},
dialogVisible:function(){
if(!this.dialogVisible){
this.$emit("childToFather","turn_false")
this.resetForm('dynamicValidateForm')
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list_update{
width: 600px;
margin:auto;
}
</style>接收toChildId和transfer，获取相关数据，循环使用addDomain方法处理成想要的数据结构。v-for循环生成input框，通过v-if判断生成input框类型（和是否为下拉框）。
主要内容在于id的监听。监听id有变化时，根据新传入的id调取内容。
但有一个bug，主要原因是如果用户点击修改后，有点击了取消，再次点击同一项的修改时，子组件接收到的toChildId没有变化，弹窗就不会被唤醒。
解决办法就是 通过向父组件传值（传什么不重要）父组件接到值后调用函数，把传过去的toChildId置空，再次点击修改时，传入的toChildId就会有变化，触发子组件相应的内容。
后台返回的数据格式是有点要求的。我用php页面获取数据，大概就是这样（PHP小白，只能写成这样了，见谅。。）：
<?php
header('Access-Control-Allow-Origin:*');
header('Content-Type:text/html; charset= utf-8');
include 'link.php';//数据库的配置
if($come_from=='update_user'){
$id=$_POST['id'];//获取数据，并给要获取的数据取别名，这里的汉字别名是子组件输入框前的中文提示$sql=" select name as '会员名称', phone as '电话号码',referrerID as '推荐人',rank as '职位',real_name as '真实姓名',bankcard as '银行卡号',bankname as '银行卡名' from user_info where id='$id' limit 1 ";
$result=mysqli_query($link,$sql);
$list=mysqli_fetch_assoc($result);
$result=mysqli_query($link,$sql);
$list=mysqli_fetch_assoc($result);$sql2=" select name,phone,referrerID,rank,real_name,bankcard,bankname from user_info where id='$id' limit 1 ";//$sql2的查询，以及后面的foreach，是为了在获取的list中加入一个key值，这个值在子组件的v-for中以及修改后提交到后台时有用到。$result2=mysqli_query($link,$sql2);$list2=mysqli_fetch_assoc($result2);
$list['会员名称']=urldecode(base64_decode($list['会员名称']));//使用的数据库中的会员名称是加密的，需要解密
$list2['name']=urldecode(base64_decode($list2['name']));
$newlist=[];
$n=0;
$n2=0;
foreach ($list as $k=>$v){
$newlist[$n]['value']=$v;
$newlist[$n]['label']=$k;
$n=$n+1;
}
foreach ($list2 as $k=>$v){
$newlist[$n2]['key']=$k;
$n2=$n2+1;
}
$re['list']=$newlist;
$re['need_select']=['职位'];//增加个标记 规定需要下拉框的输入框项
$re['select_choose'][0]="会员";//下拉框中可选的选项
$re['select_choose'][1]="店员";
$re['select_choose'][2]="门店";
$re['select_choose'][3]="全国代理";
$re['select_choose'][4]="商家";
$re['need_number']=['电话号码','推荐人'];//规定需要数字验证方式的输入框
echo json_encode($re);
}
$newlist[$n2]['key']=$k;
$n2=$n2+1;
}
$re['list']=$newlist;
$re['need_select']=['职位'];//增加个标记 规定需要下拉框的输入框项
$re['select_choose'][0]="会员";//下拉框中可选的选项
$re['select_choose'][1]="店员";
$re['select_choose'][2]="门店";
$re['select_choose'][3]="全国代理";
$re['select_choose'][4]="商家";
$re['need_number']=['电话号码','推荐人'];//规定需要数字验证方式的输入框
echo json_encode($re);
}?>
。。大概就是这样把，代码比较粗糙，瞧一眼设计思路就好了。