Как использовать глобальную переменную в родительском компоненте и 3 дочерних компонента в Vue JS - PullRequest
Новая
       20

Как использовать глобальную переменную в родительском компоненте и 3 дочерних компонента в Vue JS

0 голосов
/ 12 сентября 2018

Я создал 3 шага от использования 3 дочерних компонентов.Все эти три компонента связаны в один родительский компонент.

То, что мне нужно сделать, это:

  • Показать эти три формы как шаги в зависимости от номера шага, который должен быть глобальной переменной.
  • Обновление зависит откаждая кнопка призыва к действию.

Кто-нибудь может помочь с этим?

1 Ответ

0 голосов
/ 12 сентября 2018

Вам понадобятся 2 вещи

  1. Чтобы передать свойство компонентам, чтобы узнать текущее значение шага

  2. Для генерациисобытие от каждого компонента, поэтому родительский компонент получит уведомление о новом значении, что шаг должен быть обновлен

Я напишу код ниже и дам объяснение позже

Вашhtml 

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

Родительский компонент 

 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>
 `
  });

Компонент шага 1 

  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>`
 });

Компонент шага 2 

 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>`
 });

Компонент шага 3 

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>`
});

Каждый компонент может получить свойство step от родительского элемента, просто передав ему имя: step = "step" и зарегистрировав props: ['step'] в каждом компоненте app-step и затем внутрикомпонент шага, вы можете использовать это свойство и знать текущее значение (в текущем примере я его не использую, но я показываю, как вы можете его получить) Каждый компонент после того, как он выполнит свой расчет или какова бы ни была ваша бизнес-логика, может выдатьродитель измененияэто хотел бы быть примененным для шага.Компонент должен уведомить родителя, выполнив эту команду this.$emit('stepChanged','<value of the step>').Чтобы родительский компонент прослушал изменение, он должен зарегистрировать для каждого компонента обработчик с именем 'stepChanged' и метод, который будет называться

...