我的问题更多的是寻找解释。
我有两个组成部分，父亲和孩子。
父亲：
<template>
<Child :data="testData" />
{{testData}} //for print data in father
</template>
<script>
export default {
name: "Father",
data() {
return {
testData: {name: "hello"}
}
}
}
</script>
然后我的孩子
<template>
<input v-model="data.name" />
</template>
<script>
export default {
name: "Child",
props: ["data"]
}
}
</script>
正如本节中的文档所述： https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
我预计它会返回错误，但不，如果我尝试更改输入，父亲组件会显示正确的新值，而不会出现控制台错误。
所以我用简单的字符串测试了数据而不是父亲中的对象，例如：
父亲：
<template>
<Child :data="testData" />
{{testData}} //for print data in father
</template>
<script>
export default {
name: "Father",
data() {
return {
testData: "hello"
}
}
}
</script>
儿童：
<template>
<input v-model="data" />
</template>
<script>
export default {
name: "Child",
props: ["data"]
}
}
</script>
在这种情况下，我将得到正确的错误：
[Vue 警告]：避免直接改变道具，因为值将是 每当父组件重新渲染时都会覆盖。相反，请使用 基于道具值的数据或计算属性。道具存在 突变："数据">
发现于
是的，我知道在 JS 中对象是不同的和"神奇的"，但我希望 Vuejs 不允许这样做。
这是需要/由于(针对JS细节)行为吗？
谢谢。
在这两个示例中，您的 prop 值都是一个对象，或指向对象(及其属性/属性)的链接。
当您使用v-model="data.name"时，您不是在更改道具，而是在跟踪链接、访问对象并且仅更改其属性之一。 不能说这是否是不好的做法，但它对我来说效果很好。
在第二个示例中，v-model="data"实际上会将链接更改为另一个对象，而不仅仅是道具内部。 这会导致错误。
此线程还可以帮助： https://forum.vuejs.org/t/pass-object-via-props-reference-vs-emit-value-best-practices/45683/5