Creating a Wrapper Component with Specific Props
<script setup lang="ts">
import InputBase,{ Props as InputBaseProps } from "./InputBase.vue";
interface Props extends InputBaseProps {
label?: string;
labelClassName?: string;
...other props
}
const props = defineProps<Props>();
</script>
<template>
// Custom logic for the wrapper component using the defined props
<InputBase v-bind="$attrs" />
</template>
Implementation of the Wrapped Component
<script setup lang="ts">
import InputBase,{ Props as InputBaseProps } from "./InputBase.vue";
export interface Props {
name:string;
...other props
}
const props = defineProps<Props>();
</script>
<template>
// Logic specific to InputBase component implementation
</template>
Question on Extracting Wrapper Props and Passing Down to Base Component
The goal is to extract only the Wrapper Props and pass them to the base component. How can this be achieved in a way that allows easy extraction of InputBaseProps while maintaining type safety? Removing the "extends" keyword loses IntelliSense on the base component's props. Destructuring with toRefs has caused issues.