如何从 Nuxt/Vue 中的事件监听器获取回调

Question

我在 Nuxt 2.15.8 上，我想获得我发出的事件的结果。 我有一个发出事件的子组件。然后在父组件上接收它并做一些 api 调用。我想要一种双向通信，这样我就可以告诉孩子事件已发出，api 调用已发送并已收到结果，所以请采取一些措施！ （目前通过将布尔道具传递给孩子并观察它）

我现在在做什么：

我的父组件：

<template>
    <childcomponent :result="result" @childEvent="handleEvent" /> 
</template>
<script>
export default {
    components:{ childcomponent },
    data(){
        return{
            result: false
        }
    }
    methods:{
        async handleEvent(val){
            let res = this.$axios.get(`/example/${val}`)
            if(res){
                this.result = true
            }else{
                this.result = false
            }
        }
    }
}
</script>

我的子组件：

<template>
    <div @click="doSomething"></div>
</template>
<script>
export default {
    props:['result'],
    watch:{
        result(e){
            if(e){
                // do something
            }
        }
    }
    methods:{
        doSomething(){
            // do something
            this.$emit('childEvent', 'val')
        }
    }
}
</script>

我知道我可以使用 $nuxt.$emit() 从 parent 发出另一个事件并在 child 上接收它，但我想要一些简单的东西，例如

//child
this.$emit('childEvent', 'val' , (result)=>{
    // result of event handler sent from parent
})

// Or

let res = await this.$emit('childEvent', 'val')
if(res){
    // do something
}

有可能吗？？

Answer 1

我不确定您为什么要通知孩子。如果您只想要“加载”状态，则可以使用道具（在 axios 启动时将加载设置为 true，然后在完成时设置为 false）。顺便说一句，axios api是异步的（基于promise的），所以你必须使用await：

let res = await this.$axios.get(`/example/${val}`)

但是进入正题，可以直接调用子组件的方法，直接使用ref访问实例即可：

<template>
    <childcomponent ref="child" :result="result" @childEvent="handleEvent" /> 
</template>
<script>
export default {
    components:{ childcomponent },
    data(){
        return{
            result: false
        }
    }
    methods:{
        async handleEvent(val){
            let res = await this.$axios.get(`/example/${val}`)
            this.$refs.child.getResult(res)
        }
    }
}
</script>

还有孩子：

<template>
    <div @click="doSomething"></div>
</template>
<script>
export default {
    methods:{
        doSomething(){
            // do something
            this.$emit('childEvent', 'val')
        },
        getResult(res) {
            // do something
        }
    }
}
</script>