Estoy tratando de crear un componente de entrada personalizado con la API de composición en Vue 3, pero cuando intento actualizar el valor con el modelo v, obtengo una cadena vacía en lugar del valor del evento y cuando reemplazo el componente de Input personalizado con HTML input el valor. se está actualizando como se esperaba
Componente de entrada:
<template> <input :type="type" :id="name" :name="name" :placeholder="placeholder" class="input" v-model="modelValue" /> </template> <script lang="ts"> import { computed } from 'vue'; export default { name: 'Input', props: { modelValue: { type: String, required: true, }, name: { type: String, required: true, }, type: { type: String, default: 'text', }, placeholder: { type: String, required: true, }, }, setup(props: { value: string }, { emit }) { const modelValue = computed({ get() { return props.modelValue; }, set(value) { emit('input', value); }, }); return { modelValue }; }, }; </script> <form @submit.prevent="handleSubmit"> <Input :name="name" placeholder="Name*" v-model="name" /> <Button>Send</Button> </form>Método de configuración:
setup() { const name = ref(''); function handleSubmit(data: Event) { console.log(data, name.value); } watch(name, (old, newValue) => { console.log(name, old, newValue); }); return { name, handleSubmit }; },Hay un par de errores y advertencias en su código:
emits ( más sobre esto aquí )value transmitido desde el componente principal a la Input (por lo tanto, lo eliminé)v-model , entonces es mejor emitir un evento personalizado llamado update:modelValue (donde modelValue es el valor que desea vincular como apoyo, por ejemplo, update:name ; más sobre esto aquí )setup de la misma manera que un prop (esto es solo sensibilidad: eventualmente estropeará qué es qué) const { computed, ref, } = Vue const Input = { name: 'Input', props: { name: { type: String, required: true, }, type: { type: String, default: 'text', }, placeholder: { type: String, required: true, }, }, emits: ['update:name'], setup(props, { emit }) { const modelValue = computed({ get() { return props.name; }, set(value) { emit('update:name', value); }, }); return { modelValue }; }, template: ` <input :type="type" :id="name" :name="name" :placeholder="placeholder" class="input" v-model="modelValue" /> ` } const App = { setup() { const name = ref(''); function handleSubmit(data) { console.log(data, name.value); } return { name, handleSubmit }; }, template: ` Name Ref: {{ name }}<br /> <form @submit.prevent="handleSubmit"> <Input :name="name" placeholder="Name*" v-model="name" /> <button type="submit">Send</button> </form> ` } const vm = Vue.createApp(App) vm.component('Input', Input) vm.mount('#app') <script src="https://unpkg.com/vue@next"></script> <div id="app"></div>