vue2⽗⼦组件传参回调函数使⽤
关键点：
⽗组件给⼦组件动态传参使⽤v-bind：属性key（多个单词⽤下划线拼接）
⼦组件接收⽗组件传参参数使⽤ props标签，+属性key多个单词⽤驼峰形式拼接）
⼦组件定义回调⽗组件函数
⼦组件：
v-on:change="uploadFile()
⽗组件：
:after-upload=“afterUpload”
格列佛游记下载
然后定⼀个afterUpload(resp)⽅法接收⼦组件传过来的值
<div class="col-sm-10">
<file :text="'上传头像1'"
:input-id="'image-upload'"
:suffixs="[ ['jpg', 'jpeg', 'png']]"
:after-upload="afterUpload">
</file>
<script>
import File from "../../components/file";
export default {
components: {File},
name: "business-teacher",
data: function(){
rwc
},
mounted: function(){
},
methods: {
afterUpload(resp){
英语手抄报图片简单又漂亮let _this = this
let image = t;
_acher.image = image
}
}
}
</script>
⼦组件
<template>
<div>
<button type="button" v-on:click="lectFile()"class="btn btn-white btn-default btn-round">
<i class="ace-icon fa fa-upload"></i>
{{ text }}
</button>
<input class="hidden"type="file"
ref="file"
v-on:change="uploadFile()"
dotdot
v-bind:id="inputId+'-input'">
</div>
</template>
<script>
export default {
name: 'file',
props: {
text: {
default: "上传⽂件"
},
inputId: {
default: "file-upload"
default: "file-upload"
},
suffixs: {
英文作文题目default: []
},
afterUpload: {
type: Function,
default: null
},
},
data: function(){
return{}
},
methods: {
uploadFile(){
let _this = this;
let formData = new window.FormData();
let file= _this.$refs.file.files[0];
trar
化妆培训班成都// 判断⽂件格式
let suffixs = _this.suffixs;
let fileName = file.name;
let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCa();
let validateSuffix =fal;
for(let i =0; i < suffixs.length; i++){
let suffix2 = suffixs[i]+=''
LowerCa()=== suffix){
validateSuffix =true;
break;
}
}
if(!validateSuffix){
Toast.warning("⽂件格式不正确，只⽀持上传：" + suffixs.join(","));
none是什么意思/
/解决同⼀个⽂件上传2次或者⼤于2次，不会发⽣变化
$("#" + _this.inputId + "-input").val("");
return
}
// key："file"必须和后端controller参数名⼀致
formData.append("file", file);
Loading.show()
_this.$api.v.VUE_APP_SERVER + '/file/admin/upload', formData).then((respon)=>{ Loading.hide()
let resp = respon.data
console.log("上传⽂件成功：", resp)
//回调⽗组件函数
trueblue
_this.afterUpload(resp)
//解决同⼀个⽂件上传2次或者⼤于3次，不会发⽣变化
$("#" + _this.inputId + "-input").val("");
})
},
lectFile(){
let _this = this
// console.log("_this.inputId",_this.inputId)
$("#" + _this.inputId + "-input").trigger("click");
}
},
}
</script>
</script>
<style scoped> </style>
