为什么 prop 改变不会改变数据？

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>

---

我已经能够通过观看 prop 和 update 来解决这个问题name，但这感觉不是最好的方法。

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

Answer 1

data意味着是静态的，所以如果你设置它一次，它之后就不会反应。
当然如果你直接变异它就会改变，就像这样this.name = 'updated value hi hi'。
但如果您在其他地方更新另一个道具/状态（如您的示例中），它不会发生变化。initialName

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

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

这个例子证明，如果你像OP那样使用它，那么它的使用不会更新值（完全是反应data性的）name。initialName使用可以computed解决这个问题。