Vue: причины использовать реквизит вместо ссылки на родительские данные?

Question

В VueJS я видел разные способы доступа к родительским свойствам из компонента.Скажем, я хочу использовать родительское свойство items в моем компоненте.

Первый способ

Компонент имеет значение реквизита, привязанное к родительскому свойству:

.js

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

.html

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

Second Way

Дочерний компонент напрямую обращается к свойствам родителя, например:

this.$parent.items

Вопрос

Есть ли причина использовать более сложный первый метод над вторым?Есть ли издержки на «дублирование» подобных данных по сравнению с непосредственным доступом к ним при необходимости?

Answer 1

props должен быть мутирован в родительском компоненте, в соответствии с официальным документом :

Все реквизиты образуют одностороннюю привязку между дочерним свойствоми родительское: когда родительское свойство обновляется, оно передается дочернему, но не наоборот.Это предотвращает случайное изменение дочерних компонентов состояния родителя, что может затруднить понимание потока данных вашего приложения.

Кроме того, каждый раз, когда обновляется родительский компонент, все реквизиты в дочернем компоненте будут обновляться с помощьюпоследнее значение. Это означает, что вы не должны пытаться изменить опору внутри дочернего компонента .Если вы это сделаете, Vue предупредит вас в консоли

Поэтому, чтобы обновить props из дочернего компонента, вы должны использовать событие this.$emit и отправить новое значение, чтобы обработать обновление вродительский.