How to share data variables between child components-CodePudding

I have parent component addUser.vue and it contains v-stepper and I want to refactor v-stepper-content into couple of child components StepperOne.vue, StepperTwo.vue, StepperThree.vue like this

adddUser.vue

<v-stepper>
   <v-stepper-header>
   </v-stepper-header>
   <v-stepper-items>
     <stepper-one>
     </stepper-one>
     <stepper-two>
     </stepper-two>
     <stepper-three>
     </stepper-three>
</v-stepper>

//normally we just do this and use `v-model` but child-parent component thing is complicated
<script>
export default {
  data() {
    return {
     firstname: "",
     lastname: "",
     select: null
     }
  }
}

</script>

And these three child components use the same data variables, firstname: "", lastname: "",and select: null (for gender). How do I share this variables between these three child components into parent component?

What's the better approach?

CodePudding user response：

In Vue3 - v-model, for Vue2 - sync

CodePudding user response：

Like answered before you should be able to share data with a propperty and event/emit combination. As a sugar syntax you could use v-model or sync

Another way is to use vuex as a state for the data you could use a getter to obtain data in different components and use setters (commit) to set data to the store