javascript - 即使父级更新，子级 prop 也不会更新

Question

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

这是我的设置。在父级中我有:

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

在 child 中我定义了 Prop :

{
    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，当我在父级中更改它时(我可以确认它确实在父级上更改)，它在子级中不会更改。

如果我现在向子级添加第二个 prop，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 :

The object must be plain: native objects such as browser API objects and prototype properties are ignored.

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

那么，该怎么办呢。通过对 addedFile 方法进行一些小更改，我已经能够让您的 bin 正常工作。

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

首先，您不需要(或不想)使用$data，只需直接引用该属性即可。其次，通过使用 Object.assign 进行复制，Vue 可以正确观察对象，并且更新现在反射(reflect)在子对象中。 可能在某些时候您需要使用深层复制方法而不是Object.assign，具体取决于您的用例，但目前看来正在工作。

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