关键点: 父组件给子组件动态传参使用v-bind:
属性key(多个单词用下划线拼接) 子组件接收父组件传参参数使用 props
标签,+属性key多个单词用驼峰形式拼接)
子组件定义回调父组件函数 子组件: v-on:change=”uploadFile()
父组件: :after-upload=“afterUpload” 然后定一个afterUpload(resp)方法接收子组件传过来的值
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 } } }子组件
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 { 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"); } }, }到此这篇关于关于Vue父子组件传参和回调函数的使用的文章就介绍到这了,更多相关Vue父子组件回调函数内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!
相关文章
-
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
这篇文章主要介绍了如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-01
-
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
这篇文章主要介绍了Vue.js@2.6.10更新内置错误处机制,Fundebug同步支持相应错误监控 ,需要的朋友可以参考下2019-05-05
最新评论