等待来自子组件 Vuejs 的事件答案

【问题标题】：Await for event from child component Vuejs等待来自子组件 Vuejs 的事件
【发布时间】：2020-01-16 08:07:00
【问题描述】：

我有一个子组件和一个父组件。流程是：在父级中我有“保存更改”->我有一个更新它的方法->在子级中我也有一个方法来更新组件的一部分，但是如果我有重复值首先从父级发出更新之后我收到了 Child 的错误，我想等待 child 的回答，直到我更新父组件。

家长：

<b-btn @click="updateCustomer">Save Changes</b-btn>
<display-pr @duplicateValue="valueDuplicate"></display-pr>

    updateCustomer() {
        if(this.duplicateValue){
           //error message
        }else{
            //do something
        }
    }
    valueDuplicate(duplicateValue) {
        this.duplicateValue = duplicateValue;
    },

儿童

updateCustomerName(){
   //find if I have duplicate and if I have let duplicate=  true;
   if(duplicate){
        this.$emit('duplicateValue',duplicateValue);
   }
   else {
        //post
    }
}

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您可以在父组件的点击事件中禁用“保存更改”按钮，直到完成对子组件的重复检查。如果你检查网络调用的重复，你应该使用异步 javascript 范例。

父母

<template>
   <b-btn @click="updateCustomer">Save Changes :disabled="isSaveBtnDisabled"</b-btn>
   <display-pr @duplicateValue="valueDuplicate"></display-pr>
   <child-component @checkDuplicates="changeSaveBtnStatus"></child-component>
</template>

<script>
    data: () => {
        isSaveBtnDisabled: false
    },
    methods: {
        changeSaveBtnStatus: (event) => {
            this.isSaveBtnDisabled = event;
        }
    }
</script>

孩子

updateCustomerName: () => {
        this.$emit('checkDuplicates', true);
        /*
         * Here is code statements the checking duplicates and enable save button by calling
         * this.$emit('checkDuplicates', false);
         *
         */
        this.$emit('checkDuplicates', false);
       if(duplicate){
            this.$emit('duplicateValue',duplicateValue);
       }
       else {/***post ***/}
    }

【讨论】：