Javascript 发出一个事件，等待，然后在Vue中发出另一个事件

我有以下事件发射到父组件并正常工作：

this.$emit('sendToParent1', true);
this.$emit('sendToParent2');
this.$emit('sendToParent3');
this.$emit('sendToParent4', true);
this.$emit('sendToParent5', false);

然而，我遇到了一个特定的问题，它要求我按照这个顺序一个接一个地发出这5个事件

//emit this first and wait until the parent has finished what its supposed to do
this.$emit('sendToParent1');
//after the parent is done, we emit the next one from the child
this.$emit('sendToParent2');
//same behavior, once it is emitted to parent and the parent finishes executing, then we emit the next one...
this.$emit('sendToParent3');
//again
this.$emit('sendToParent4', true);
//and again
this.$emit('sendToParent5', false);

我认为最好的方法是让一个道具检测事件何时完成了它应该执行的任何操作，然后将一个道具发送给子级，然后当该道具被更新时，下一个发射被执行，依此类推。有人能告诉我如何解决这个问题的最佳方向吗

父级具有以下组件：

<component v-on:sendToParent5="parentFunctionFive" v-on:sendToParent4="parentFunctionFour" v-on:sendToParent1="parentFunctionOne" v-on:sendToParent2="parentFunctionTwo" v-on:sendToParent3="parentFunctionThree"></component>

---

您应该重新考虑实现组件的方式，我认为您可以尝试发出一个包含所有所需信息的事件，并在父级调用相应的函数

---

如果您想以这种方式实现它，您可以向我们发送一个随事件一起发送的变量，并在每次事件发生时递增该变量，然后在父级中跟踪该变量，并按照http协议中的正确顺序执行事件。如果您解释了您的最终目标，我们将更容易回答（请参阅），但根据您提供的信息，我认为正确的方法是将名为

next

的函数作为事件参数传递，并在工作完成时触发它，这将使过程继续到下一阶段

this.$emit('sendToParent1', {
 value: true,
 next: 
  () => this.$emit('sendToParent2', {
       value: false,
       next: () => this.$emit('sendToParent3', false);
     })
});

---

另一方面，Vue 2文档建议我同意发出一个事件的概念，但不确定是否增加一个变量。我的替代方案是，如果已知，在一个事件的有效负载中发送所有必要的信息，然后在父方法中包含逻辑，以便在必要时链接您的axios调用。当然，使用有效负载的一个事件方法会更简单、更好，但我在第二种方法中说过，如果您想使用多个发射器。

this.$emit('sendToParent1', {
 value: true,
 next: 
  () => this.$emit('sendToParent2', {
       value: false,
       next: () => this.$emit('sendToParent3', false);
     })
});

parentFunctionOne: function({value, next}) {
  axios.get('/api/do_something-1/')
    .then((res)=>{
        this.something1 = res.data;
        next() // proceed
    })
    .catch((error)=>{
        console.log(error);
    });
},

parentFunctionTwo: function({value, next}) {
  axios.get('/api/do_something-2/')
    .then((res)=>{
        this.something2 = res.data;
        next() // proceed
    })
    .catch((error)=>{
        console.log(error);
    });
},

parentFunctionThree: function() {
  axios.get('/api/do_something-3/')
    .then((res)=>{
        this.something3 = res.data;
    })
    .catch((error)=>{
        console.log(error);
    });
},