父组件传值给子组件，子组件接收后，重新渲染？

Question

问题描述

编写了一个上传图片的子组件，第一次上传，唯一ID的字段是空的，上传成功之后，后台返回一个唯一id，第二次上传时，会将之前的id写入参数中，再进行上传。

现在的问题，是第二次上次始终无法将id写进参数中，每次上传都会生成一个新的id；

相关代码

• template代码

父组件，

<upload-case-img :desc="`正面像`" 
            :order="Number(1)"
            @upsuccess="bindFace"
            :category-id="categoryId">
</upload-case-img-two>


....
// 绑定正面像第一次上传
    bindFace(val){
      console.log(val);
      this.categoryId = val.categoryId
   }

子组件

<template>
  <vue-dropzone
    ref="twoVueDropzone"
    id="dropzone"
    :options="dropzoneOptions"
    @vdropzone-success="vsuccess"
  ></vue-dropzone>
</template>

// 我使用的是Dropzone
...
props:{
    categoryId: {
      type: String,
      default:''
    }
}
data: function() {
    return {
      // backUrl:'',
      
      Dropzone: null,
      dropzoneOptions: {
        url: "/common/oss/upload_by_category_id",
        paramName: "file",
        params:  {imageName: this.desc, categoryId: this.categoryId, orderSort:this.order} ,
        thumbnailWidth: 150,
        maxFilesize: 1, // 最大文件大小
        maxFiles: 1, // 文件数量
        addRemoveLinks: true,
        headers: { "My-Awesome-Header": "header value" },
        dictDefaultMessage: `<i class='fa fa-cloud-upload'></i></br>${
          this.desc
        }`,
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消", // 取消上传
        dictInvalidInputType: "", // 文件类型被拒绝
        dictCancelUploadConfirmation: "", //取消上传确认信息的文本
        dictFileTooBig: "文件过大请重新选择", // 文件过大的提示文本
        dictRemoveFile: "", // 移除文件链接的文本
        dictMaxFilesExceeded: "" //超过最大文件数量的提示文本
      }
    };
  },
// 监听categoryId
watch: {
    categoryId(newValue, oldValue) {
        console.log(`新值${oldValue}`);
        this.categoryId = newValue;
        console.log(`最终id${this.categoryId}`);
      }
  },

需求

不知道如何在子组件的categoryId变化的时候（有值的时候），重新初始化上传组件，让参数传递进去。求教

Answer 1

使用一个hack方法：

<component>
v-if="hackReset"
</component>

this.hackReset = false;

  this.$nextTick(() => {
    this.hackReset = true;
  });