Vue3 $attr issue
What problem does this feature solve?
Sometimes a component has a parent element because of UI purposes or other purposes like this:
<template>
<div>
<input v-bind="$attrs"/>
</div>
</template>
In this situation, when we add input attributes(placeholder and autofocus), it has added to the input element and the parent div element. But we need to add just to the input element, which is an issue.
What does the proposed API look like?
code:
<InputBase placceholder="name">
Rendered HTML should be like this:
<div>
<input placeholder="name"/>
</div>
But it rendered like this:
<div placeholder="name">
<input placeholder="name"/>
</div>
I found it and solved based on documents:
export default {
inheritAttrs: false,
}