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

Question

我通过使用3个子组件创建了3个步骤。 所有这三个组件都链接在一个父组件中。

我需要做的是：

• 将这三种形式显示为步骤，具体取决于要成为全局变量的步骤号。
• 更新取决于每个表单号召性用语按钮。

有人可以帮忙吗？

Answer 1

您将需要两件事

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”并在每个app-step组件中注册一个props：['step']来从父级接收step属性，然后在step组件内部使用此属性属性并知道当前值（在当前示例中，我不使用它，但是我展示了如何接收它）计算后的每个组件或您的业务逻辑是什么，都可以向父级发出想要的更改应用于该步骤。 组件应通过运行此命令this.$emit('stepChanged','<value of the step>')通知父对象。 为了使父组件侦听更改，它应向每个组件注册一个名为“ stepChanged”的处理程序以及将被调用的方法