Estoy en Vue3 y trato de capturar un valor del niño al padre. Entonces mi código es:
En el padre:
<template> <input-form v-model="valueSuperficie" label="Surface en m²" /> </template> <script> data() { return { valueSuperficie = null, } } </script>y en el niño trato de hacer una emisión.
<template> <input v-on:change="$emit('userEntry', $event.target.valueInput)" v-model="userEntry" /> </template> <script> data() { return { userEntry: this.valueInput, }; }, emits: ["userEntry"], </script>Sé que mi código es incorrecto, lo que me gustaría es lograr almacenar el valor del niño, es decir, userEntry en el valor de datos Superficie del padre. Gracias
En el componente secundario, defina un accesorio llamado modelValue y emita un evento llamado update:modelValue :
<template> <input v-on:input="$emit('update:modelValue', $event.target.value)" :value="modelValue" /> </template> <script> export default{ props:{ modelValue:String }, emits: ["update:modelValue"], } </script>Supongo que el nombre del componente secundario es input-form . El padre debe procesar el evento que el hijo está desencadenando mediante una función de devolución de llamada. Esa función sería un método que asigna el valor recibido al valor interno llamado valueSuperficie .
Así que el padre debería verse así:
<template> <input-form @user-entry="onUserEntry" label="Surface en m²" /> </template> <script> data() { return { valueSuperficie = null, } }, methods: { onUserEntry(valueInput) { this.valueSuperficie = valueInput; } } </script>