Как обновлять данные во вложенных компонентах?

Question

[Никита К.]

Добрый день!
Помогите пожалуйста разобраться в следующей ситуации при использовании vue.js: Есть страница, в хуке created() я получаю данные. Страница представляет из себе несколько логических блоков, которые я решил разделить на компоненты, которые в свою очередь содержат субкомпоненты.

Я передаю данные через props компонентам страницы, а от них так же "субкомпонентам". Т.е. при изменении данных в "субкомпонентах" мне нужно сделать $emit() компоненту страницы, а из компонента страницы $emit() самой странице.
Меня смущает конструкция при которой сначала субкомпонент генерирует событие, например, 'subcomponent-amount-change', а затем что бы отловить на странице аналогичное событие должен тригерить родительский компонент.

Т.е. Структура примерно следующая:

<page>
   <component :some-data="someData">
      <subcomponent :amount="someData.amount" :title="someData.title"></subcomponent>
  </component>
</page>

Может я что то не так понимаю - и не стоит все дробить на компоненты, но тогда в файле компонента получается большая простыня кода.

Answer 1

[lavezzi1]

У вас вроде все ок с иерархией компонентов, просто используйте vuex для централизованного хранения данных и тяните их где угодно. При изменении их в vuex store эффект будет везде и на странице и в компонентах.

Comments

[Никита К.]

Спасибо за ответ. Попробую использовать vuex.