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

Question

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

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

我相信最好的方法是让一个 prop 检测事件何时完成执行它应该做的任何事情，然后向孩子发送一个 prop，然后当该 prop 更新时，下一个 emit 会被执行，依此类推等等。有人可以指出如何解决这个问题的最佳方向吗？

Parent 具有以下组件：

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

Parent 有以下方法：

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

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

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

       parentFunctionFour: function(passed_value) {
            //changing the value of a variable in data
            this.trueOrFalse = passed_value;
        },
        parentFunctionFive: function(passed_value) {
             //changing the value of a variable in data
            this.valuePassed = passed_value;
        }

Answer 1

如果您解释了您的最终目标是什么（请参阅XY problem），我们会更容易回答，但根据您提供的信息，我认为正确的方法是传递一个名为 next 的函数作为事件参数并在工作完成时触发它，这将使流程继续到下一个阶段。

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

Answer 2

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

如果您想以这种方式实现它，您可以使用一个随事件一起发送的变量，并在每次发生事件时递增它，并在父级跟踪该变量并以正确的顺序执行事件，如 http协议