是否可以以同步模式执行 $emit 并从 emit 事件中获取结果

Question

是否可以同步执行并在调用方法本身时返回结果。所以，我想在 $emit 完成后执行下一条语句。如下：

Parent component has method, 
                 doCustomValidation();

child component is as follow:
methods:
{
  Save: function(){
 // Can I get the response here from parent component and then, execute 
    doGenericValidation ?

 var errorFields = this.$emit('custom-validation');  
   doGenericValidation(errorFields);   //this is generic validations
}

Answer 1

没有。 $emit 将始终排队。也可能有多个侦听器，因此 return 值没有实际意义。

作为解决方法，您可以将函数作为属性发送，然后直接调用它。

Answer 2

您不应该尝试使其同步。相反，您可以使用这个想法：

methods: {
    myMethod() {
        // Pass a function as a parameter.
        this.$emit('custom-validation', this.onComplete);
    },
    onComplete() {
        // Do stuff after custom-validation has completed.
    }
}

然后在使用您的事件的任何组件中：

<some-component @custom-validation="doStuff" />
<script>
...
methods: {
    doStuff(done) {
        // Your logic here. After that, call the callback function.
        done();
    }
}
...

Answer 3

您可以为发射创建一个基于承诺的包装器并等待其结果。

这是我最终为我的项目创建的一个非常通用的解决方案：

    async emitPromised(method, ...params){
        let listener = this.$listeners[method] || this.$attrs[method] || this[method]
        if(listener){
            let res = await listener(...params)
            return res === undefined || res
        }
        return false
    },

现在你可以这样使用了：

        async onDelete(){
            this.isDeleting = true
            let res = await this.emitPromised("delete")
            this.isDeleting = false
            if(res){
                this.closeConfirm()
            }
        },

您可以通过 mixin 包含此方法或将其全局附加到 Vue 实例，以便所有组件都可以访问它。

请注意，$listeners 存储使用 @ 或 v-on（如 <MyComponet @click="onClick"/>）绑定到此组件的所有方法，而 $attrs 存储传递的所有内容使用 v-bind 或 :（如 <MyComponet :click="onClick"/>）

到组件

是否可以以同步模式执行 $emit 并从 emit 事件中获取结果

Is it possible to execute $emit as synchronous mode and get the result back from emit event

javascript

vue.js

vuejs2

emit