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 usar un Emit con un v-model?

28 May, 2023 Programación

Soy un traductor de español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzca el código y la salida en Markdown.

Estoy en Vue3, e intento capturar un valor del hijo al padre.
Mi código es:

En el padre:

<template>
  <input-form v-model="valueSuperficie" label="Surface en m²" />
</template>

data() {
  return {
    valueSuperficie: null,
  }
}

y en el hijo intento hacer un emit.

<template>
  <input 
    v-on:change="$emit('userEntry', $event.target.valueInput)"
    v-model="userEntry"
  />
</template>

data() {
  return {
    userEntry: this.valueInput,
  };
},
emits: ["userEntry"],

Sé que mi código es incorrecto, lo que me gustaría es poder almacenar el valor del hijo, es decir, userEntry en el valor de data valueSuperficie del padre.
Gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para capturar un valor del hijo al padre en Vue3, se puede usar la característica v-model o emitir un evento desde el componente hijo y manejarlo en el componente padre.

    En primer lugar, para usar la característica v-model, se debe definir una propiedad en el componente hijo y pasarla desde el componente padre. Luego, en el componente hijo, se puede vincular la propiedad al campo de entrada usando la directiva v-model. Cuando cambia la entrada del usuario, se actualiza automáticamente el valor en el componente padre.

    En el componente padre:

    <template>
  <input-form v-model="valueSuperficie" label="Superficie en m²"></input-form>
</template>

<script>
  export default {
    data() {
      return {
        valueSuperficie: null,
      }
    }
  }
</script>

    En el componente hijo:

    <template>
  <input v-model="userEntry">
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        userEntry: this.value,
      };
    },
    watch: {
      userEntry() {
        this.$emit('update:value', this.userEntry);
      }
    }
  }
</script>

    En este ejemplo, update:value es el nombre del evento personalizado que es emitido por el componente hijo. this.userEntry es el valor que se pasa al componente padre.

    En la plantilla del padre, se debe escuchar el evento update:value y manejarlo actualizando el valor de la propiedad de datos valueSuperficie:

    <template>
  <input-form :value="valueSuperficie" @update:value="valueSuperficie = $event" label="Superficie en m²"></input-form>
</template>

<script>
  export default {
    data() {
      return {
        valueSuperficie: null,
      }
    }
  }
</script>

    Cuando se emite el evento update:value, pasa el valor actualizado como $event. Se actualiza valueSuperficie en consecuencia.

    Tenga en cuenta que se puede personalizar el nombre del evento como se desee, y los nombres de la propiedad y la propiedad de datos también pueden ser diferentes.

Comments are closed.