Correct relationship between components?

Question

Vue.js

Hello!
I have a root component, for example print-form. In this component, a component for rendering tabs is nested, then a component for rendering a list of fields in one tab is nested, then a component that combines different types of data input (input). And finally, wrappers over inputs. In the parent component, I pass an array of tabs and field descriptions through props. And then in each component a piece of this array is passed to the child.
But now the task is to send the form via Ajax . That is, I need to get all the value values ​​\u200b\u200bin one array and send it already. So what is the right way to implement a structure of this level of nesting and be able to get the value values ​​of the final elements?

Answer 1

It is convenient to use store. Vue has Vuex
Store data in store: Then you can access this data from any component:

import { mapGetters } from 'vuex';

// code...
computed: {
  ...mapGetters({
    data: 'getData', 
  }),
},

The data is reactive.
ps there is a convenient way to split into modules (user, global etc)