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

的方法。

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

1 个答案: