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

编程问答 2022-05-26

问题描述

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

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 检测事件何时完成执行它应该执行的任何操作，然后向 child 发送一个 prop，然后当该 prop 更新时执行下一次发出，依此类推等等。有人能指出我如何解决这个问题的最佳方向吗？

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

解决方法

如果您解释一下您的最终目标是什么，我们会更容易回答（请参阅 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);
    });
},
,

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

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

emitjavascriptvue.js