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应该根据the official doc在父组件中进行突变：

所有道具在子属性和父属性之间形成单向绑定：当父属性更新时，它将向下流到子属性，但不会反过来。这样可以防止子组件意外更改父组件的状态，从而使您的应用数据流更难以理解。

此外，每次更新父组件时，子组件中的所有道具都会以最新值刷新。 这意味着您不应该尝试在子组件内部变异道具。 。如果这样做，Vue会在控制台中警告您

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

Vue：为什么使用道具而不是引用父数据？

1 个答案: