Estoy tratando de crear un componente HTML <input> personalizado para VueJS3. He estado siguiendo este tutorial:
https://dev.to/viniciuskneves/vue-custom-input-bk8
Hasta ahora logré que el componente CustomInput.vue funcione y emita el valor modificado de vuelta a la App.Vue principal.
<template> <label> {{ label }} <input type="text" :name="name" :value="value" @input="onInput" @change="onChange" /> </label> </template> <script> export default { name: 'CustomInput', props: { label: { type: String, required: true, }, value: { type: String, required: true, }, }, computed: { name() { return this.label.toLowerCase(); }, }, methods: { onInput(event) { this.$emit('input', event.target.value); }, onChange(event) { this.$emit('change', event.target.value); }, }, } </script>Lo que no entiendo es: ¿cómo detectará el componente principal App.vue los eventos emitidos? No puedo ver que suceda, y no puedo encontrarlo en el tutorial.
Mi App.Vue se ve así:
<template> <custom-input :label="'Name'" :value="name"></custom-input> <div>{{ name }}</div> </template> <script> import customInput from "./components/CustomInput.vue"; export default { components: { customInput }, name: "App", data: function () { return { name: "", }; }, mounted() { this.name = "Thomas"; }, }; </script>Gracias de antemano por cualquier ayuda :-)
Este tutorial es para Vue 2 - para Vue 3 hay otro tutorial ( https://www.webmound.com/use-v-model-custom-components-vue-3/ )
La emisión de eventos de input solo funciona en Vue 2: para Vue 3 tendrá que emitir update:modelValue y también usar modelValue como accesorio en lugar de solo value .
Puedes hacerlo directamente en tu plantilla.
<custom-input :label="'Name'" :value="name" @change='name=$event' @input='name=$event'></custom-input>También puede usar un método o calcular con setter también.