How to get value from one component in another in Vue js?

Question

Vue.js

Good afternoon, I ran into a problem, I don’t know how to solve it, I just started learning vue js, I have a main component with cards output and there are filters on it, I moved the filters to another component and connected it in the main component, in the component where the filters are there is an input type checkbox and using v-model I get the value, but the method is in the main component, that is, the button after pressing which all data is collected and transferred to axios, how to implement so that the filters are separately connected but when I click on the button in the main component, all the data from the child components was collected and then transferred to axios

Answer 1

https://medium.com/@modex13/vue-js-2-%D0%BF%D0%B5%...
I would do it through the v-model directive:
The parent component stores the filter values. And it passes them to the child A child component does not change these states itself, but simply fires an event with new values. The parent updates them:
<filters v-bind:value="filtersState">

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

Or in short form Thus, the parent who uses and manages the data himself. He and only he stores this data and is always up to date. And the child filter acts solely as a UI for displaying data. It accepts a state from the parent, and tells the parent when that state needs to be changed.
<filters v-model="filtersState">