Javascript 如何正确销毁croper.js，以便下一次裁剪获得新图像？

我有一个vue应用程序表单，它有一个ant design vue upload的图像上传程序。我将这个图像上传器链接到一个新组件，该组件使用croper.js在上传后处理图像以进行裁剪。这是第一次，一切都很好，工作得很好。但当用户需要更改照片并再次裁剪时，裁剪区域上的图像仍使用第一个图像。第三次上传将裁剪第二个区域，下一次将受到相同的影响

这是我的代码结构：

<template>
  <div>
    <a-row :gutter="16">
      <img ref="image" :src="initialImage">
    </a-row><br />
    <a-row :gutter="16">
      <a-button type="primary" style="float: right;" @click="crop">Crop</a-button>
      <a-button style="float: right; margin-right: 5px;" @click="cancel">Cancel</a-button>
    </a-row>
  </div>
</template>

---

我已经销毁了this.crapper，但仍然裁剪了相同的图像。我尝试通过console.log预览this.crapper、this.image、this.initialImage、this.uploadeImage的每个值，但所有这些都没有问题。它将在此上携带新值。使用vue watch更改上载的图像。我不知道为什么只有上面的函数仍然带有相同的图像。有什么方法可以初始化回this.crapper，或者有什么方法可以解决我的问题，比如重新渲染此子组件？

您可以通过给Vue元素一个键并更新键来刷新它们。 例如，在导入PostCropper组件的位置：

<PostCropper v-bind:key="refreshValue" />

然后在父元素的数据属性中指定一个名为

refreshValue

的属性，并给它一个类似于1的值。然后，当您需要刷新组件时，只需更改值。

---

这可能需要您将事件从

PostCropper

组件发送到父级，然后递增

refreshValue

您可以通过给Vue元素一个键并更新该键来刷新它们。 例如，在导入PostCropper组件的位置：

<PostCropper v-bind:key="refreshValue" />

然后在父元素的数据属性中指定一个名为

refreshValue

的属性，并给它一个类似于1的值。然后，当您需要刷新组件时，只需更改值。

---

这可能需要您从

PostCropper

组件向父组件发送一个事件，然后递增

refreshValue

我有另一种方法可以销毁父组件中的子组件，而不是销毁变量。使用v-if方法销毁导入的组件非常有效。

我有另一种方法可以销毁父组件中的子组件，而不是销毁变量。使用v-if方法销毁导入的组件，效果非常好。

所以，我需要查看密钥而不是上载的映像？或者不用看钥匙？我以前读过。我可以理解需要如何处理父组件。但是我们应该如何处理子组件呢@贾斯汀大吃一惊。因为我“尝试了，但什么也没发生”

，这是一个增量函数：`updateImage（updateImage）{this.latestImage=updateImage；this.refreshCropper+=1；this.showcroper=false；}，`所以，我需要查看键而不是上传的图像？或者不用看钥匙？我以前读过。我可以理解需要如何处理父组件。但是我们应该如何处理子组件呢@贾斯汀大吃一惊。因为我“尝试了，但什么也没发生”

，这是一个增量函数：`updateImage（updateImage）{this.latestImage=updateImage；this.refreshCropper+=1；this.showCropper=false；}，`我已经克服了这个问题，但用v-if销毁了子组件。这是正确的还是有其他正确的方法？但是它工作得很好，我已经克服了这个问题，但是用v-if销毁了子组件。这是正确的还是有其他正确的方法？但它工作得很好

<PostCropper v-bind:key="refreshValue" />