项目场景：

在同一个编辑页面使用了同一个Vue组件,导致props 传值无效

问题描述：

在做一个文章编辑的页面,需要通过切换文章类型 ( 音频 / 视频) 显示隐藏上传不同类型的按钮给用户上传 , 例如以下代码会出现一个奇怪的问题, 当我从article_mode 从音频 切换到 视频 的时候 filters的改变无效:

// 音频组件
<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的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。

// 音频组件
<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'
   }"
 />
}