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

阿布的微信

关键点： 父组件给子组件动态传参使用

1. v-bind:

复制代码

属性key（多个单词用下划线拼接） 子组件接收父组件传参参数使用

1. props

复制代码

标签，+属性key多个单词用驼峰形式拼接）
子组件定义回调父组件函数 子组件： v-on:change="uploadFile()
父组件： :after-upload=“afterUpload” 然后定一个afterUpload(resp)方法接收子组件传过来的值

1.     <div class="col-sm-10">
   
2.                   <file :text="'上传头像1'"
   
3.                         :input-id="'image-upload'"
   
4.                         :suffixs="[ ['jpg', 'jpeg', 'png']]"
   
5.                         :after-upload="afterUpload">
   
6.                   </file>
   
7. <script>
   
8. import File from "../../components/file";
   
9. export default {
   
10.   components: {File},
    
11.   name: "business-teacher",
    
12.   data: function () {
    
13.   },
    
14.   mounted: function () {
    
15.   },
    
16.   methods: {
    
17.     afterUpload(resp) {
    
18.       let _this = this
    
19.       let image = resp.content;
    
20.       _this.teacher.image = image
    
21.     }
    
22.   }
    
23. }
    
24. </script>

复制代码

子组件

1. <template>
   
2.   <div>
   
3.     <button type="button" v-on:click="selectFile()" class="btn btn-white btn-default btn-round">
   
4.       <i class="ace-icon fa fa-upload"></i>
   
5.       {{ text }}
   
6.     </button>
   
7.     <input class="hidden" type="file"
   
8.            ref="file"
   
9.            v-on:change="uploadFile()"
   
10.            v-bind:id="inputId+'-input'">
    
11.   </div>
    
12. </template>
    
13. <script>
    
14. export default {
    
15.   name: 'file',
    
16.   props: {
    
17.     text: {
    
18.       default: "上传文件"
    
19.     },
    
20.     inputId: {
    
21.       default: "file-upload"
    
22.     },
    
23.     suffixs: {
    
24.       default: []
    
25.     },
    
26.     afterUpload: {
    
27.       type: Function,
    
28.       default: null
    
29.     },
    
30.   },
    
31.   data: function () {
    
32.     return {}
    
33.   },
    
34.   methods: {
    
35.     uploadFile() {
    
36.       let _this = this;
    
37.       let formData = new window.FormData();
    
38.       let file = _this.$refs.file.files[0];
    
39.       // 判断文件格式
    
40.       let suffixs = _this.suffixs;
    
41.       let fileName = file.name;
    
42.       let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
    
43.       let validateSuffix = false;
    
44.       for (let i = 0; i < suffixs.length; i++) {
    
45.         let suffix2 = suffixs[i] += ''
    
46.         if (suffix2.toLowerCase() === suffix) {
    
47.           validateSuffix = true;
    
48.           break;
    
49.         }
    
50.       }
    
51.       if (!validateSuffix) {
    
52.         Toast.warning("文件格式不正确，只支持上传：" + suffixs.join(","));
    
53.         //解决 同一个文件上传2次或者大于2次，不会发生变化
    
54.         $("#" + _this.inputId + "-input").val("");
    
55.         return
    
56.       }
    
57.       // key："file"必须和后端controller参数名一致
    
58.       formData.append("file", file);
    
59.       Loading.show()
    
60.       _this.$api.post(process.env.VUE_APP_SERVER + '/file/admin/upload', formData).then((response) => {
    
61.         Loading.hide()
    
62.         let resp = response.data
    
63.         console.log("上传文件成功：", resp)
    
64.         //回调父组件函数
    
65.         _this.afterUpload(resp)
    
66.         //解决 同一个文件上传2次或者大于3次，不会发生变化
    
67.         $("#" + _this.inputId + "-input").val("");
    
68.       })
    
69.     },
    
70.     selectFile() {
    
71.       let _this = this
    
72.       // console.log("_this.inputId",_this.inputId)
    
73.       $("#" + _this.inputId + "-input").trigger("click");
    
74.     }
    
75.   },
    
76. }
    
77. </script>
    
78. <style scoped>
    
79. </style>

复制代码

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

来源:https://www.jb51.net/article/283978.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！