Блог

Я относительно новичок в Vue JS, но чувствую, что относительно хорошо разбираюсь в иерархии компонентов. Просто столкнулся здесь с проблемой, которая меня немного смущает и на самом деле не соответствует моему пониманию того, что props следует делать.

В моем родительском компоненте у меня есть вызываемый data атрибут loading , который инициализируется как true . У меня также есть вызываемый атрибут dataItems , который инициализируется как null , но заполняется асинхронным методом, вызывающим API. В точке, в которой dataItems успешно заполнено, loading также должно быть установлено значение false. Этот вызов API выполняется внутри mounted функции.

Все работает так, как ожидалось на родительском уровне, но передача этих двух атрибутов дочернему компоненту (через реквизиты), похоже, только передает их начальное состояние ( true и null , соответственно) и никогда не обновляет их.

В качестве краткого примера я добавил несколько lt;pgt; тегов как к родительскому, так и к дочернему компонентам для вывода данных, вот сокращенный HTML и JS, которые я использовал.

Родительский компонент:

 lt;templategt;  lt;pgt;Loading: {{loading}}lt;/pgt; // outputs Loading: false  lt;pgt;dataItems: {{dataItems}}lt;/pgt; //outputs JSON string  lt;ChildComponent :loading="loading" :dataItems="dataItems" /gt; lt;/templategt;  lt;scriptgt;  data: function() {  loading: true  dataItems: null  },  methods: {  getDataItems: async function() {  //.. make API call  this.dataItems = response.data  loading = false  }  },  mounted: function() {  this.getDataItems()  } lt;/scriptgt;  

Дочерний компонент:

 lt;templategt;  lt;pgt;Loading: {{loading}}lt;/pgt; // outputs Loading: true  lt;pgt;dataItems: {{dataItems}}lt;/pgt; //no output lt;/templategt;  lt;scriptgt;  props: ["loading", "dataItems"],  data: function() {  loading: this.loading  dataItems: this.dataItems  }, lt;/scriptgt;  

Поэтому, когда родительский и дочерний компоненты отображаются вместе, это то, что я вижу:

 Loading: false // from parent dataItems: {"someJsonString"} // from parent Loading: true // from child  //from child  

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

Если кто-нибудь может подсказать мне правильное направление, я был бы очень признателен!

Спасибо

ваш код верен, но, похоже, подход, который вы решили реализовать, props не подходит для этой ситуации.

Вы (как вы упомянули) инициализируете свое дочернее состояние (его данные) с помощью реквизитов. Этот подход полезен, когда вам нужно изменить эти данные из дочернего компонента, поскольку вы не можете изменить реквизит непосредственно из дочернего компонента, это может сделать только родитель.

Теперь я вижу, что цель вашего дочернего компонента-показывать только информацию, которую отправляет родитель (с помощью реквизитов). Таким образом, вы можете напрямую получить доступ из своего шаблона к значениям реквизитов, которые являются ссылками (они являются реактивными).

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

 lt;templategt;  lt;pgt;Loading: {{ loading }}lt;/pgt;  lt;pgt;dataItems: {{ dataItems }}lt;/pgt; lt;/templategt;  lt;scriptgt;  props: ["loading", "dataItems"],  data: function() {  // Use the props directly in your template  }, lt;/scriptgt;