1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue2 父子组件传参 回调函数使用

vue2 父子组件传参 回调函数使用

时间:2022-01-16 21:07:56

相关推荐

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 () {},mounted: function () {},methods: {afterUpload(resp) {let _this = thislet image = resp.content;_this.teacher.image = image}}}</script>

子组件

<template><div><button type="button" v-on:click="selectFile()" 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()"v-bind:id="inputId+'-input'"></div></template><script>export default {name: 'file',props: {text: {default: "上传文件"},inputId: {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];// 判断文件格式let suffixs = _this.suffixs;let fileName = file.name;let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();let validateSuffix = false;for (let i = 0; i < suffixs.length; i++) {let suffix2 = suffixs[i] += ''if (suffix2.toLowerCase() === suffix) {validateSuffix = true;break;}}if (!validateSuffix) {Toast.warning("文件格式不正确,只支持上传:" + suffixs.join(","));//解决 同一个文件上传2次或者大于2次,不会发生变化$("#" + _this.inputId + "-input").val("");return}// key:"file"必须和后端controller参数名一致formData.append("file", file);Loading.show()_this.$api.post(process.env.VUE_APP_SERVER + '/file/admin/upload', formData).then((response) => {Loading.hide()let resp = response.dataconsole.log("上传文件成功:", resp)//回调父组件函数_this.afterUpload(resp)//解决 同一个文件上传2次或者大于3次,不会发生变化$("#" + _this.inputId + "-input").val("");})},selectFile() {let _this = this// console.log("_this.inputId",_this.inputId)$("#" + _this.inputId + "-input").trigger("click");}},}</script><style scoped></style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。