如何在Vue js的父组件和3个子组件中使用全局变量

Question

I have created 3 steps from using 3 child components. All these three components are linked in one parent component.

What I need to do is:

• Show these three forms as steps depending on step number which I need to be a global variable.
• Update depends on each form call to action button.

Can anyone help on this?

Answer 1

You will need 2 things

1. To pass a property to the components in order to know the current step value

2. To emit an event from each component so the parent component will get notified about the new value that the step should be updated

I write the code below and give the explanation later

Your html

 <div id="app">
 </div>

Parent Component

 var instance = new Vue({
   el:'#app',
   data:{
     step:1
   },
   methods:{
     stepChanged:function(step){
       alert('Moving to step:'+step);
      this.step = step;
    }
  },
  template:`
  <div>
 <app-stepone v-if="step==1" v-on:stepChanged="stepChanged" :step="step" > 
  </app-stepone>

 <app-steptwo v-if="step==2" v-on:stepChanged="stepChanged" :step="step" > 
 </app-steptwo>

 <app-stepthree v-if="step==3" v-on:stepChanged="stepChanged" :step="step"> 
 </app-stepthree>
 </div>
 `
  });

Step 1 component

  Vue.component('app-stepone',{
   props:['step'],
   data:function(){
   return {};
  },
   methods:{
    moveStep(){
     this.$emit('stepChanged',2)
   }
  },
   template:`<div>We are in Step 1 - {{step}}<br /><button v- 
    on:click="moveStep()">Move to Step 2</button></div>`
 });

Step 2 Component

 Vue.component('app-steptwo',{
   props:['step'],
   data:function(){
    return {};
  },
  methods:{
    moveStep(){
      this.$emit('stepChanged',3)
   }
  },
  template:`<div>We are in Step 2 - {{step}}<br /><button v- 
 on:click="moveStep">Move to Step 3</button></div>`
 });

Step 3 Component

Vue.component('app-stepthree',{
  props:['step'],
  data:function(){
   return {};
 },
  methods:{
   moveStep(){
     this.$emit('stepChanged',1)
  }
 },
 template:`<div>We are in Step 3 - {{step}}
   <br />
    <button v-on:click="moveStep">Move to first step</button>
    </div>`
});

Each component can receive the step property from the parent by just passing to it with the name :step="step" and registering a props:['step'] in every app-step component and then inside the step component you can use this property and know the current value (in the current example i do not use it, but i show how you can receive it ) Each component after it does its calculation or whatever your business logic is, can emit to the parent the change that would like to be applied for the step. The component should notify the parent by running this command this.$emit('stepChanged','<value of the step>') . In order for the parent component to listen for the change, it should register to each component a handler that will have the name 'stepChanged' and the method that will be called