Блог

У меня есть следующие события, которые передаются родительскому компоненту и работают нормально:

 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 и так далее, и так далее. Может ли кто-нибудь указать мне наилучшее направление, как решить эту проблему?

Родительский элемент имеет следующий компонент:

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

Родительский элемент имеет следующие методы:

          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), но из предоставленной вами информации я думаю, что правильным способом было бы передать функцию, вызываемую 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