背景：

最近在做一个文件上传的功能，子组件上传文件，实时在父组件显示。

实现：

1. 父组件通过 props 将文件数据传递给子组件

props: {
    syncFileList:{
      type: Array,
      default:() => []
    },
}

2. 子组件接受文件

 computed: {
  fileList: {
      get() {
        return this.syncFileList.map((el) => ({
          name: el.fileName || el.name,
          url: el.url,
          uploadStatus: 'success',
          percentage: 100,
          ...el
        }));
      },
      set() {
      }
    }
 
 }

3. 子组件上传文件成功后,通过 $emit 传递给父组件

importSuccess(response, file, fileList){
    this.$emit('updateFile', fileList);
}

总结：

• 父组件改变props，子组件如果直接使用props，会触发子组件更新
• 父组件改变props，子组件如果将props放进data中再使用，不会触发子组件更新
• 父组件改变props，子组件如果将props放进computed中再使用，会触发子组件更新