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

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

我需要做的是：

• 根据步骤编号将这三种形式显示为步骤，步骤编号必须是全局变量
• 更新取决于每个表单调用操作按钮

有人能帮忙吗？

你需要两样东西

将特性传递给组件以了解当前步长值的步骤

从每个组件发出一个事件，以便父组件将收到有关应更新步骤的新值的通知

我将代码写在下面，稍后给出解释

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

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

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

var实例=新的Vue({
el:“#应用程序”，
数据：{
步骤：1
},
方法：{
步骤更改：功能（步骤）{
警报（“移动到步骤：”+步骤）；
这个步骤=步骤；
}
},
模板：`
`
});

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

Vue.component（'app-stepone'{
道具：['step']，
数据：函数（）{
返回{}；
},
方法：{
moveStep（）{
此.$emit（'stepChanged'，2）
}
},
模板：`我们在第1步-{{Step}}
转到第2步`
});

步骤2组件

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

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

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

Vue.component（'app-step2'{
道具：['step']，
数据：函数（）{
返回{}；
},
方法：{
moveStep（）{
此.$emit（'stepChanged'，3）
}
},
模板：`我们在第2步-{{Step}}
转到第3步`
});

步骤3组件

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

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

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

Vue.component（'app-stepthree'{
道具：['step']，
数据：函数（）{
返回{}；
},
方法：{
moveStep（）{
此.$emit（'stepChanged'，1）
}
},
模板：`我们在步骤3-{{Step}}


进入第一步
`
});

每个组件都可以从父组件接收step属性，只需将名称传递给它：step=“step”，并在每个应用程序步骤组件中注册一个props:['step']，然后在步骤组件内部，您就可以使用此属性并知道当前值（在当前示例中，我不使用它，但我演示了如何接收它） 每个组件在完成计算或任何业务逻辑后，都可以向父级发出希望应用于该步骤的更改。组件应通过运行以下命令通知父级

this.$emit（'stepChanged'，''）

。 为了让父组件侦听更改，它应该向每个组件注册一个名为“stepChanged”的处理程序和将被调用的方法。您需要两件事

将特性传递给组件以了解当前步长值的步骤

从每个组件发出一个事件，以便父组件将收到有关应更新步骤的新值的通知

我将代码写在下面，稍后给出解释

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

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

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

var实例=新的Vue({
el:“#应用程序”，
数据：{
步骤：1
},
方法：{
步骤更改：功能（步骤）{
警报（“移动到步骤：”+步骤）；
这个步骤=步骤；
}
},
模板：`
`
});

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

Vue.component（'app-stepone'{
道具：['step']，
数据：函数（）{
返回{}；
},
方法：{
moveStep（）{
此.$emit（'stepChanged'，2）
}
},
模板：`我们在第1步-{{Step}}
转到第2步`
});

步骤2组件

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

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

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

Vue.component（'app-step2'{
道具：['step']，
数据：函数（）{
返回{}；
},
方法：{
moveStep（）{
此.$emit（'stepChanged'，3）
}
},
模板：`我们在第2步-{{Step}}
转到第3步`
});

步骤3组件

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

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

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

Vue.component（'app-stepthree'{
道具：['step']，
数据：函数（）{
返回{}；
},
方法：{
moveStep（）{
此.$emit（'stepChanged'，1）
}
},
模板：`我们在步骤3-{{Step}}


进入第一步
`
});

每个组件都可以从父组件接收step属性，只需将名称传递给它：step=“step”，并在每个应用程序步骤组件中注册一个props:['step']，然后在步骤组件内部，您就可以使用此属性并知道当前值（在当前示例中，我不使用它，但我演示了如何接收它） 每个组件在完成计算或任何业务逻辑后，都可以向父级发出希望应用于该步骤的更改。组件应通过运行以下命令通知父级

this.$emit（'stepChanged'，''）

。

---

为了让父组件侦听更改，它应该向每个组件注册一个名为“stepChanged”的处理程序和将调用的方法

答案在您的问题上hehehe检查此示例。。。对每个组件执行此操作，添加一个prop stepCount，然后只传递stepCount全局数据。。。另外，你的代码似乎已经在做你想做的事情了，也许可以尝试使用v-show而不是v-if，以防出现渲染问题。我不理解你的问题。如果

stepCount

等于相关的int值，则会显示每个组件。什么东西没有按你期望的那样起作用？答案就在你的问题上呵呵，看看这个例子。。。对每个组件执行此操作，添加一个prop stepCount，然后只传递stepCount全局数据。。。另外，你的代码似乎已经在做你想做的事情了，也许可以尝试使用v-show而不是v-if，以防出现渲染问题。我不理解你的问题。如果

stepCount

等于相关的int值，则会显示每个组件。什么东西没有按你期望的那样工作？你可以在codepen上查看工作示例谢谢你，gijoe！你救了我一天。完美解释：）你可以在codepen查看工作示例谢谢你，gijoe！你保存