IT俱乐部 JavaScript 关于Vue父子组件传参和回调函数的使用

关于Vue父子组件传参和回调函数的使用

发布: 2023年 5月 12日 496阅读

关键点： 父组件给子组件动态传参使用v-bind:属性key（多个单词用下划线拼接） 子组件接收父组件传参参数使用 props标签，+属性key多个单词用驼峰形式拼接）

子组件定义回调父组件函数 子组件： v-on:change=”uploadFile()

父组件： :after-upload=“afterUpload” 然后定一个afterUpload(resp)方法接收子组件传过来的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
    <div class="col-sm-10">
                   
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
    }
  }
}
 
</div>
<p>子组件</p>
<div class="jb51code"><pre class="brush:js;"><div>
    <button type="button" class="btn btn-white btn-default btn-round">
      <i class="ace-icon fa fa-upload"></i>
      {{ text }}
    </button>
     
</div>
 
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");
    }
  },
}
 
</pre>
</div>
<p>到此这篇关于关于Vue父子组件传参和回调函数的使用的文章就介绍到这了,更多相关Vue父子组件回调函数内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！</p>
<p></p>

相关文章

最新评论

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/8015.html
57赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部