關鍵點：
父組件給子組件動態傳參使用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>

總結

以上是生活随笔為你收集整理的vue2 父子组件传参 回调函数使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。