Vue:使用道具而不是引用父数据的原因？

Question

在VueJS中,我已经看到了从组件访问父属性的不同方法.假设我想items在组件中使用父属性.

第一种方式

该组件具有绑定到父属性的props值:

.js文件

Vue.component("example", {
  template: "<div></div>",
  props: ["myItems"]
});

html的

<example v-bind:my-items="items"></example>

第二种方式

子组件直接访问父项的属性,如下所示:

this.$parent.items

题

是否有理由在第二种方法中使用更精细的第一种方法？是否存在"复制"这类数据的开销,而不是在需要时直接访问它？

Answer 1

本props应在父组件突变,根据官方的文档:

所有道具在子属性和父属性之间形成单向下绑定:当父属性更新时,它将向下流向子,但不是相反.这可以防止子组件意外地改变父级状态,这可能会使您的应用程序的数据流更难理解.

此外,每次更新父组件时,子组件中的所有道具都将使用最新值进行刷新.这意味着您不应该尝试改变子组件内的prop.如果你这样做,Vue会在控制台中警告你

因此,为了props从子组件更新,您应该使用this.$emitevent并发送新值以便在父组件中处理更新.