Disculpas si esto se ha publicado en alguna otra variación antes, pero parece que no puedo encontrar un buen hilo sobre cómo hacerlo en mi caso de uso. Me estoy tropezando con cómo hacer que Vue esté más basado en programación orientada a objetos (más importante aún, cómo heredar de otros componentes). Estoy intentando usar la API de Composición, ya que parece más una opción flexible, pero tal vez me esté perdiendo cómo aprovecharla adecuadamente.

Tengo un componente base llamado FieldText . Esto configura la plantilla inicial y el código repetitivo para todos mis otros componentes de Campo* (Número, Casilla de verificación, etc.) y permite agregar atributos personalizados al elemento de entrada, como el tipo de entrada y reglas de validación que solo se aplican al Componente de campo*... como min y max solo funcionan para campos como número y fecha, por lo que solo me gustaría contener esta lógica para esos componentes.

Luego tengo FieldNumber , que intenta "extender" desde FieldText usándolo como plantilla. El problema aquí es que cuando hago v-bind="$props" , en realidad no va al elemento de entrada... va al div padre. Puede resolver esto configurando inheritAttrs: false en FieldText y haciendo un v-bind en el input el, pero entonces no tendré clases que vayan al elemento principal.

Podría usar Pug , pero parece que viene con sus propias peculiaridades, y no estoy seguro de que realmente resuelva mi problema. También podría intentar abstraer esto a composables , pero eso solo resuelve el aspecto lógico, no el aspecto de marcado.

Estoy jugando con la idea de pasar algún tipo de inputAttrs a FieldText, pero los métodos de configuración no interactúan. Ahora llegué a la conclusión de que no estoy usando la API de composición correctamente, y no sé cómo refactorizaría esto para que se comporte de una manera más orientada a objetos. ¿Alguien puede darme una idea de cómo abordaría esto?