Vue中如何通过父子组件传参和回调函数实现复杂的数据交互和事件处理？

本文共计589个文字，预计阅读时间需要3分钟。

目录+关键词：+父子组件给子组件动态传参使用v-bind+属性key（多个单词用下划线连接）+子组件接收父组件传参参数使用props+标签，属性key多个单词用驼峰式连接）+子组件定义回调函数调用父组件

目录

关键点： 父组件给子组件动态传参使用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 = this let 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.data console.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>

到此这篇关于关于Vue父子组件传参和回调函数的使用的文章就介绍到这了,更多相关Vue父子组件回调函数内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！