vue コンポーネントが同じページ上で props を複数回呼び出し、渡された値が無効です

プロジェクトのシナリオ:

同じ Vue コンポーネントが同じ編集ページで使用されているため、値を渡すプロパティが無効になります

---

問題の説明:

記事編集ページでは、記事の種類（音声/動画）を切り替えて、ユーザーがアップロードするアップロードボタンの表示と非表示を切り替える必要があります。たとえば、次のコードでは、article_mode を音声から動画に切り替えると、フィルタの変更が無効になるという奇妙な問題が発生します。

// 音频组件
<upload-component
    v-if="article_mode ==10"
   :value.sync="article_audio"
   :filters="{
    
    
     mime_types : [
       {
    
    title : 'Mp3 files', extensions : 'mp3' }
     ],
     max_file_size : '20mb'
   }"
 />
}
// 视频组件
<upload-component
   v-if="article_mode ==20"
   :value.sync="article_video"
   :filters="{
    
    
     mime_types : [
       {
    
    title : 'Mp4 files', extensions : 'mp4' }
     ],
     max_file_size : '30mb'
   }"
 />
}

---

解決：

:key スコープを追加する

key の特別な属性は、主に Vue の仮想 DOM アルゴリズムで、古いノードと新しいノードを比較するときに VNode を識別するために使用されます。キーを使用しない場合、Vue は動的要素を最小限に抑え、同じタイプの要素を可能な限り変更して再利用するアルゴリズムを使用します。キーを使用する場合は、キーの変更に基づいて要素の順序を並べ替え、存在しない要素を削除します。さらに、同じ親要素を持つ子要素には一意のキーが必要であり、キーが繰り返されるとレンダリング エラーが発生します。

// 音频组件
<upload-component
    v-if="article_mode ==10"
   :key="0" // 新增
   :value.sync="article_audio"
   :filters="{
    
    
     mime_types : [
       {
    
    title : 'Mp3 files', extensions : 'mp3' }
     ],
     max_file_size : '20mb'
   }"
 />
}
// 视频组件
<upload-component
   v-if="article_mode ==20"
   :key="1" // 新增
   :value.sync="article_video"
   :filters="{
    
    
     mime_types : [
       {
    
    title : 'Mp4 files', extensions : 'mp4' }
     ],
     max_file_size : '30mb'
   }"
 />
}