Отключение наследования атрибутов

Если вы не хотите, чтобы корневой элемент компонента наследовал атрибуты, вы можете установить inheritAttrs: false в опциях компонента. Например:

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

Это может быть особенно полезно в сочетании со свойством экземпляра $attrs, которое содержит имена атрибутов и значения, переданные компоненту, например:

{
  required: true,
  placeholder: 'Введите имя пользователя'
}

С помощью inheritAttrs: false и $attrs вы можете вручную определять к какому элементу должны применяться атрибуты, что часто требуется для базовых компонентов:

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

Обратите внимание, что опция inheritAttrs: false не влияет на биндинги style и class.

Этот шаблон позволяет вам использовать базовые компоненты больше как обычные HTML-элементы, не беспокоясь о том, какой элемент будет у него корневым:

<base-input
  v-model="username"
  required
  placeholder="Введите имя пользователя"
></base-input>