How to share data variables between child components

Question

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?

The usual `v-model` way would work just fine here probably? – Sami Kuhmonen Feb 24 '22 at 06:21 — Sami Kuhmonen, Feb 24 '22 at 06:21

score 0 · Answer 1 · answered Feb 24 '22 at 07:10

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

How to share data variables between child components

1 Answers1