En la migración de vue 2 a vue 3, recibo algunas advertencias de compilación. La desaprobación de $listeners en componentes es una de esas advertencias. Revisé la documentación oficial para usar $attrs eliminando $listeners. Soy nuevo en vue 3. Por lo tanto, no puedo entender cómo manejar esas advertencias relacionadas con los oyentes.
Aquí está el fragmento: 1er caso: Componente 1
<template> <div> <input ref="input" :value="txtField" @input="txtField=$event.target.value" :type="inputType" :class="inputClass" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" :onfocus="disabled&&'this.blur();'" :tabindex="tabindex" v-on="listenersInput" // here is the method where $listeners used @keyup.enter="enterHandler" @blur="validateOnEvent"/> </div> </template> //method listenersInput() { //var vm = this; return Object.assign({}, this.$listeners, { input: function(event){ /*vm.$emit('input',event.target.value);*/} }); },2º caso: Componente 2
<template> <custom-button v-bind="buttonProps" v-on="$listeners" :class="buttonClass" @click="tooggle"></custom-button> </template>¿Cómo manejar estos dos casos?
En Vue 3 $listeners movidos a $attrs , puede usar v-bind="$attrs" . Aquí hay un artículo de docs
Documentación adicional: https://vuejs.org/guide/components/attrs.html#nested-component-inheritance