[Vue Pattern] Transparent Component Pattern

<template>
    <div>
        <input type="text" v-bind="$attrs" />
    </div>
</template>

<script setup lang="ts" >
// by default when you pass props to the component, Vue will attach those props to the root of the component
// in this case, is the <div>, by using `inheritAttrs: false`, Vue will attach props to the place we write $attrs
defineOptions({
  inheritAttrs: false
})
</script>
    

 

See more: https://vuejs.org/guide/components/attrs#disabling-attribute-inheritance