Как в компоненте VueJs отключить наследование атрибутов?

Question

[kokospro]

К компонентее VueJS указываю inheritAttrs: false.
Но классы все равно прописваются в корневой элемент.

что я делаю не так?

<template>
  <div class="ui-input">
    <div v-if="label" class="ui-input__label">{{ label }}</div>
    <input class="ui-input__field"  v-on="$listeners" v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
  export default{
    name: 'ui-input',
   props:....
    inheritAttrs: false
  }
</script>

Использую

<ui-input type="text"  class="form-control form-control-lg" label="Секретный ключ"></ui-input>

Answer 1

[0xD34F]

указываю inheritAttrs: false <...> классы все равно прописваются в корневой элемент

Относительно inheritAttrs документация говорит, что

this option does not affect class and style bindings

Так что отключить не получится. Но можно сделать компонент функциональным (например) - у них атрибуты автоматически не назначаются корневому элементу.

UPD. Срочно переезжаем на vue 3, там поведение inheritAttrs поправили.