Question

我的问题更多是寻求解释。

我有两个组成部分，父亲和孩子。

父亲：

<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://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）？

谢谢。

Answer 1

在两个示例中，您的prop值都是一个对象，或者是指向该对象（及其属性/属性）的 link 。

使用v-model="data.name"时，您没有更改道具，而是遵循链接，访问对象，仅更改其属性之一。不能说这是不好的做法，但是对我来说很好。

在第二个示例中，v-model="data"实际上会更改链接到另一个对象，而不仅仅是道具内部。这会导致错误。

该线程还可以帮助：https://forum.vuejs.org/t/pass-object-via-props-reference-vs-emit-value-best-practices/45683/5

如果对象Vue js更改父项

1 个答案: