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

Question

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

我需要做的是：

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

有人可以帮忙吗？

Answer 1

你需要两样东西

传递一个属性给组件以了解当前步长值
从每个组件发出一个事件，以便父组件将收到有关应更新步骤的新值的通知

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

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

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

How to use global variable in parent component and 3 child component in Vue js

javascript

components

global

vue.js