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

fslejnso  于 2022-12-14  发布在  Vue.js
关注(0)|答案(4)|浏览(435)

有没有可能像emit一样同步执行,并在调用方法本身中返回结果。所以,我想在$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
}
yk9xbfzb

yk9xbfzb1#

您不应该试图使其同步。相反,您可以使用以下方法:

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();
    }
}
...
kr98yfug

kr98yfug2#

您可以为emit创建一个基于promise的 Package ,并等待其结果。
下面是我为我的项目创建的一个非常通用的解决方案:

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"/>)存储传递到该组件的所有方法

tquggr8v

tquggr8v3#

不,$emit总是排队的,也可能有多个监听器,所以返回值没有实际意义。
作为一种解决方法,您可以将函数作为属性发送到中,然后直接调用它。

eoxn13cs

eoxn13cs4#

我也有相同的问题陈述,其中我在parent中有我的validations方法,并希望在执行保存操作之前在child组件中检查它。
如果你想执行类似的操作,那么一个更好的选择是将方法作为 prop 传递。等待$emit的响应可能没有意义。

范例:

我需要调用的方法是从子组件的save()方法调用父组件的doCustomValidation().

父代码库(仅显示名称与所问问题匹配的所需代码库):

<template>
    <child-component
      :doCustomValidation="doCustomValidation"
    />
</template>
<script lang="ts">
import ChildComponent from "@/students/ChildComponent.vue";

export default defineComponent({
    components: { 
        "child-component": ChildComponent,
    },
    methods: { 
        doCustomValidation() { 
           let isValid = false;
           // do your stuff here, even you can access the 
           // validation params and show the validations here.
           return isValid;
        }
    }
})
</script>

子代码库(仅显示名称与所问问题匹配的所需代码库):

<script lang="ts">
export default defineComponent({
  props: ["doCustomValidation"],
  methods: { 
      save() {
         // calling parent validation method and 
         // this will wait for result.
         if(this.doCustomValidation()) {
            // perform Save here.
         }
      }
  }
)}
</script>

相关问题