[Vuejs]-I want to use Vue Fallthrough attributes, however I do not want them to be placed on the container, only on input inside component

by

1👍

✅

you need to disable attribute inheritance, see documentation

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

Disabling Attribute Inheritance {#disabling-attribute-inheritance}

If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component’s options.

Since 3.3 you can also use defineOptions directly in <script setup>:

<script setup>
defineOptions({
  inheritAttrs: false
})
// ...setup logic
</script>

The common scenario for disabling attribute inheritance is when attributes need to be applied to other elements besides the root node. By setting the > inheritAttrs option to false, you can take full control over where the fallthrough attributes should be applied.

These fallthrough attributes can be accessed directly in template expressions as $attrs:

<span>Fallthrough attributes: {{ $attrs }}</span>

The $attrs object includes all attributes that are not declared by the component’s props or emits options (e.g., class, style, v-on listeners, etc.).

👤Dimava

Leave a comment