子道具没有更新，即使父母更新了

Question

我有一个非常奇怪的情况，即子组件的 prop 的更改不会触发重新渲染。

这是我的设置。在我的父母中：

        <child :problemProp="proplemPropValue""></child>

在孩子中我定义了道具：

{
    name: "Child",
    props: {
    problemProp: {
        type: [File], //yes it is a file 
        required: true
    }
}

然后我尝试渲染它（仍在子组件中）

<template>
  <div id="dropzone-preview" class="file-row">
    {{problemProp}} <--This should just show the prop as a JSON string-->
  </div>
</template>

这最初是正确呈现的。但是problemProp 有一个属性upload.progress，当我在父级中更改它时（我可以确认它确实在父级上更改）它在子级中没有更改。

如果我现在添加第二个道具，dummyProp 给孩子：

   {
    name: "Child",
    props: {
    problemProp: {
        type: [File], //yes it is a file 
        required: true
    },
    dummyProp: {
        type: Number
    }
}

现在，当dummyProp 发生变化时，propblemProp 也会发生变化。这里发生了什么？为什么dummyProp 的更改会强制重新渲染，而propblemProp 的更改不会？

Answer 1

问题的根源似乎是当您将 File 对象添加到数组时，Vue 无法将其转换为观察值。这是因为Vue ignores browser API objects:

对象必须是普通对象：浏览器 API 对象等原生对象 并且原型属性被忽略。

在这种情况下，对该对象的任何更改都不会自动反映在 Vue 中（正如您通常所期望的那样），因为 Vue 不知道它们已更改。这也是为什么当您更新 dummyProp 时它似乎可以工作的原因，因为该属性的更改被观察到并触发重新渲染。

那么，该怎么办。通过对 addedFile 方法进行一些小改动，我已经能够让您的垃圾箱工作。

addedfile(file){
  console.log(file);
  self.problemPropValues.push(Object.assign({}, file));
},

首先，您不需要（或不想）使用$data，直接引用该属性即可。其次，通过使用Object.assign 进行复制，Vue 可以正确地观察对象并且更新现在反映在子对象中。 可能在某些情况下您需要使用深拷贝方法而不是 Object.assign，具体取决于您的用例，但目前这似乎可行。

Here is the code我最终让 bin 工作（转换为 codepen，因为我发现使用 codepen 更容易）。