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

Question

[strygunmax0512]

Добрый день, столкнулся с проблемой, не знаю как решить, я только начал изучать vue js, у меня есть главный компонент с выводом карточек и есть на нем фильтры, фильтры я вынес в другой компонент и подключил его в главном компоненте, в компоненте где фильтры есть input type checkbox и с помощью v-model я получаю значение, но метод находиться в главном копоненте, то есть кнопка после нажатие которой собираються все данные и передаються в axios, как реализовать так что бы фильтра были отдельно подключеные но когда я нажимаю на кнопку в главном компоненте собрались все даные с дочерних компонентов и передались потом в axios

Answer 1

[Alex]

https://medium.com/@modex13/vue-js-2-%D0%BF%D0%B5%...

Я бы сделал через директиву v-model:
Родительский компонент хранит значения фильтров. И передаёт их в дочерний
<filters v-bind:value="filtersState">
А дочерний компонент сам эти состояния не изменяет, а просто стреляет событием с новыми значениями. Их обновляет родитель:

<filters v-bind:value="filtersState" v-on:input="newFiltersState => filtersState = newFiltersState">

Или в сокращенной форме
<filters v-model="filtersState">

Таким образом, родитель который использует данные сам ими и управляет. Он и только он хранит эти данные и всегда в актуальном состоянии. А дочерний фильтр выполняет роль исключительно UI для отображения данных. Он принимает от родителя состояние, и сообщает родителю, когда это состояние нужно изменить.