Как более правильно и удобно организовать структуру VUE компонентов?

Question

[ByJumping]

Привет. Помогите организовать удобную структуру взаимодействия компонентов.

Есть главный компонент ReportsMain. в нем два дочерних компонента

<template>
  <div class="container">
    <ReportsSettings :formSettings="formSettings"/>

    <ReportsGraphs :formSettings="formSettings"/>
  </div>
</template>

//

setup() {
formSettings: {
// здесь куча настроек для фильтрации графиков
}
}

Какая логика должна быть, компонент фильтрации передает настройки, которые должны примениться к компоненту графиков. Но в самом компоненте графиков можно нажать на колонку или строку и будет применяться фильтрация, соответственно в фильтре эти данные тоже должны появиться, например.

В графике есть данные по - Взрослые, дети, семьи. Сами данные по количеству в разных регионах, и при нажатии региона он попадет в сам компонент фильтрации.

То есть как лучше организовать структуру что бы данные одинаково менялись в дочерних компонентах через родительский.

Сейчас я просто эмичу события и главный компонент уже меняет пропсы своим дочерним компонентам

Answer 1

[Антон Антон]

Так варианта-то всего два - стор и props/emit )
В данном случае неплохо работает второй подход, причем я бы хранил данные и фильтр в родителе, передавая отфильтрованные данные (computed) в "отображающий компонент" и фильтр и туда и туда в качестве v-model (для vue-3 - можно именованную)

Comments

[ByJumping]

спасибо) думал тоже на счет стора, но здесь использовать в 1 месте не решился) думал вдруг есть способ элегантней

[Кирилл Романов]

есть ещё provide-inject

[Антон Антон]

Кирилл Романов, оно не реактивное, вроде

[ByJumping]

Кирилл Романов, не думаю что здесь это нужно, дочерние компоненты находятся на одном уровне

[Кирилл Романов]

ByJumping, тут конечно, я в общем)

[Кирилл Романов]

Антон Антон, можно сделать реактивным