为什么道具更改不会更改数据？

Question

我试图理解为什么更改用于提供初始值的道具不会导致数据变量发生变化。

在下面的示例中，更改父组件中传递的 initialName 值，也会导致子组件中的 initialName 发生更改。但是，name 保留它最初初始化的值。我相信，似乎是错误的，改变道具会重新渲染组件。

ChildComponent.vue

<template>
    <div>
        {{initialName}}
        {{name}}
    </div>
</template>
<script>
export default {
    props: {
        initialName: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            name: this.initialName,
        };
    },
</script>

ParentComponent.vue

<template>
    <ChildComponent :initialName="AnExampleName"/>
</template>
<script>
import ChildComponent from ChildComponent.vue
export default {
    components: {
        ChildComponent
    }
</script>

我已经能够通过观看道具和更新来解决这个问题 name，但是这并不是最好的方法。

为什么更改道具不会更改数据？有没有更好的方法将初始值传递给子组件？

Answer 1

data本来就是静态的，所以设置一次，之后就不会反应了。
如果你直接改变它，它当然会改变，就像这样 this.name = 'updated value hi hi'.
但是，如果您在其他地方更新另一个 prop/state（例如您的示例中的 initialName），它将 不会突变 。

一个简单的方法是使用像这样的computed

<script>
export default {
  props: {
    initialName: {
      type: String,
      default: "",
    },
  },
  computed: {
    name() {
      return this.initialName
    }
  },
};
</script>

This example proves that the usage of data is NOT updating the name value (initialName is totally reactive) if you do use it like the OP did. The usage of computed 解决了这个问题。

为什么道具更改不会更改数据？

Why does a prop change not change data?

vue.js

vuejs2