VueJS - 使用參數從發射更新父值？

Question

我真的不知道該怎么說，但我會解釋一下：

我有一個表單，用戶可以在其中上傳圖像。 上傳圖片如下

<input id="visualisation_upload" @change="onThumbnailChanged" name="visualisation_upload" accept="image/*" type="file" class="sr-only">

onThumbnailChanged (event) {
    const file = event.target.files[0];
    this.fields.thumbnail = file;
    this.fields.thumbnailPreview = URL.createObjectURL(file);
},

我想向用戶展示哪些文件已上傳，並讓他們根據需要刪除文件。 為此，我使用了一個名為uploadedFiles的組件

我將組件稱為如下：

<uploadedFiles v-if="this.fields.thumbnail" :file="this.fields.thumbnail" :preview="this.fields.thumbnailPreview" @update-images="updateFiles"></uploadedFiles>

在 uploadFiles 組件中，我有一個 click 事件，它應該清空 uploadFiles 中的道具和傳遞給組件的道具。 當我嘗試直接在這樣的組件中執行它時（你不應該這樣做），我當然會Avoid Mutating a Prop Directly ：

deleteFiles() {
    this.file = ''
    this.preview = null
}

在父組件中，我有一個方法，我想清空這樣的值

<a @click="$emit('update-images', file, preview), file = '', preview = null" class="hover:text-gray-900 cursor-pointer"></a>

updateFiles: function(file, preview) {
    file = ''
    preview = null
},

但我似乎無法讓它工作。 我正在嘗試使組件動態化，因此我不必在每個組件中創建方法。

我不知道我是否有任何意義。 點是，當點擊按鈕時。 從組件中清空this.fields.thumbnail和file 。 我怎樣才能做到這一點？

Answer 1

您可以發出update:xxx事件，然后在父級（ https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier ）中使用xxx.sync修飾符：

<uploadedFiles 
  v-if="this.fields.thumbnail" 
  :file.sync="this.fields.thumbnail" 
  :preview.sync="this.fields.thumbnailPreview" 
/>

deleteFiles() 
{
    this.$emit('update:file', '');
    this.$emit('update:preview', null);
}