需求:代码更改后有几个受影响对象,flag为是则弹出具体信息框,若为否则关闭,并清除信息框信息,信息框中内容还涉及上传文件。
实现:由于多个对象涉及复用,则使用父组件调用子组件的方式实现。
父组件:
使用v-model双向绑定数据
<template> <div>
<affect-item v-model="mydata1" item-name="object1" ref="object1"></affet-item> <affect-item v-model="mydata2" item-name="object2"></affet-item> </div> </template>
<script>
import {default as AffetItem} from "./affetItem";
export default {
name:"Father",
components:{AffectItem},
methods:{
handle(){
//功能代码
this.$refs.object1.uploadSubmit(param);//可以传参数,调用此方法会报错:upload为undefined
}
}
}
</script>
子组件:
<template>
<div>
<el-form :model="form>
<div>
<el-radio v-model="form.flag" @input="change" :label=true>是</el-radio>
<el-radio v-model="form.flag" @input="change" :label=false>否</el-radio>
</div>
<div>
<el-form-item label="影响内容" prop="content">
<el-input v-model="form.content></el-input>
</el-form-item>
<el-form-item label="影响文件" prop-"file">
<el-upload :action="uploadUrl" :data="data" :on-change="handleChange" :auto-upload="false" ref="upload">
<el-button slot="trigger" id="selectFile">
<i class="el-icon-circle-plus"/>
</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default{
name:"affetItem",
model:{
prop:"form",
event:"change"
},
props:{
itemName:{
type:String,
default:""
},
form:{
type:Object,
default:function(){
return{}
}
}
},
methods:{
change(val){
//强制刷新
this.$forceUpdate();
if(!val){
this.$emit("change",{flag:false})
}
},
handleChange(file,fileList){
if(file.status === "ready"){
this.$emit("change",this.form);
}
},
uploadSubmit(info){
this.$refs.upload.submit();
}
}
}
</script>
解决:不适用model的change方式传回参数,使用返回方法
父组件更改:
<affet-item item-name="object1" ref="object1" @custClick="custMethod"/>
//新增方法手动绑定数据
custMethod(value){ //value来自子组件传参
this.form.object = value;
}
子组件更改:
handleChange(file,fileList){ if(file.status === "ready"){ this.$emit("custClick",this.form); } },
标签:undefined,form,向父,default,upload,file,组件,change From: https://www.cnblogs.com/menoyahu/p/17086547.html