Digamos que tengo un elemento que envuelve una entrada y toma todas sus propiedades, además de algunas más.
En reaccionar, esto se escribiría como
interface ExtendedInputProps extends React.ComponentPropsWithoutRef<'input'> { some: Type } Y es un caso de uso bastante común. Soy consciente de que Vue 3 genera sus tipos de accesorios en función de lo que se pase a los props: objeto en defineComponent.
Estoy imaginando haciendo algo como:
props:{ ...getComponentProps('input') additionalProp: String }Pero no tengo idea de cómo hacerlo y no puedo encontrar ningún documento al respecto. ¿Es posible?
El caso más simple es cuando la entrada es el elemento raíz del componente, entonces no necesita declarar nada adicional, simplemente pase los atributos a su componente y se transmitirán
//NumberInput Component <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script setup lang="ts"> defineEmits(["update:modelValue"]) const props = withDefaults(defineProps<{ modelValue?: number }>(), { modelValue: 0 }) </script>Se puede utilizar de esta manera:
<number-input v-model="data" type="text" placeholder="123-45-678" /> donde el type y el placeholder de posición terminarán como atributos del elemento de entrada.
Si tiene una entrada anidada dentro de su componente, debe deshabilitar la herencia de atributos:
//NumberInput Component <template> <div class="wrapper"> <input :value="modelValue" v-bind="$attrs" @input="$emit('update:modelValue', $event.target.value)" /> </div> </template> <script setup lang="ts"> defineEmits(["update:modelValue"]) const props = withDefaults(defineProps<{ modelValue?: number }>(), { modelValue: 0 }) </script> <script lang="ts"> // normal `<script>`, executed in module scope (only once) // declare additional options export default { inheritAttrs: false, customOptions: {} } </script> Tenga en cuenta que agregamos una segunda etiqueta de script para deshabilitarHeredarAttrs y agregamos v-bind="$attrs" inheritAttrs la entrada para pasar los atributos explícitamente. Más sobre el tema se puede encontrar aquí