es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo obtener una devolución de llamada desde un escuchador de eventos en Nuxt/Vue

11 Jun, 2023 Programación

Estoy en Nuxt 2.15.8 y quiero obtener el resultado de mi evento emitido.

Tengo un componente hijo donde se emite el evento. Luego lo recibo en el componente padre y realizo algunas llamadas a API. Quiero una comunicación bidireccional para poder decirle al hijo que se emitió el evento, se envió la llamada a la API y se recibió el resultado, ¡así que haz alguna acción!(actualmente lo hago pasando una propiedad booleana al hijo y observando eso).

Lo que hago ahora:

Mi componente padre:

<template>
    <childcomponent :result="result" @childevent="handleEvent"></childcomponent> 
</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>

Mi componente hijo:

<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>

Sé que puedo usar $nuxt.$emit() para emitir otro evento desde el padre y recibirlo en el hijo, pero quiero algo simple como:

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

// O

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

¿Es posible en absoluto?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible lograr una comunicación bidireccional entre componentes padre e hijo sin pasar una propiedad booleana y observarla. Puede utilizar el objeto Promise para devolver el resultado del evento emitido del componente padre al componente hijo.

    En su componente hijo, puede modificar el método $emit para devolver un objeto Promise que se resolverá con el resultado del controlador de eventos enviado desde el componente padre. Aquí hay un ejemplo:

    // componente hijo
methods: {
  async hacerAlgo() {
    const resultado = await new Promise((resolver) => {
      this.$emit('eventoHijo', 'val', resolver)
    })
    // hacer algo con el resultado
  }
}

    En su componente padre, puede modificar el método handleEvent para pasar el resultado de la llamada a la API a la función de resolución proporcionada por el componente hijo a través del objeto Promise. Aquí hay un ejemplo:

    // componente padre
methods: {
  async handleEvent(val, resolver) {
    const res = await this.$axios.get(`/ejemplo/${val}`)
    if (res) {
      resolver(true)
    } else {
      resolver(false)
    }
  }
}

    Con estos cambios, puede lograr una comunicación bidireccional entre componentes padre e hijo sin pasar una propiedad booleana y observarla.

Comments are closed.