vue2 父子组件传参回调函数使用

最新推荐文章于 2024-08-21 18:23:58 发布

gblfy

最新推荐文章于 2024-08-21 18:23:58 发布

阅读量1.8k

点赞数 1

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_40816738/article/details/121184402

版权

vue3 专栏收录该内容

29 篇文章 4 订阅

订阅专栏

该博客详细介绍了在Vue中如何实现父组件向子组件动态传参，以及子组件如何通过props接收参数。同时，展示了子组件定义回调函数并调用父组件方法来传递上传文件后的响应数据，用于更新父组件状态。例子中涉及的关键技术包括v-bind、props、v-on以及父子组件间的通信。

摘要由CSDN通过智能技术生成

关键点：
父组件给子组件动态传参使用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>