Свойство inheritAttrs в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,inheritAttrs— это опция компонента, определяющая, должны ли атрибуты, не являющиеся пропсами (то есть атрибуты, которые не были явно определены как пропсы), переданные от родительского компонента дочернему, наследоваться корневым элементом дочернего компонента.

По умолчанию,inheritAttrsзначениеtrue, что означает, что все атрибуты, не являющиеся пропсами, переданные родительским компонентом, будут автоматически привязаны к корневому элементу дочернего компонента.inheritAttrsустанавливается вfalse。

Как это понятьinheritAttrs？

Представьте, что у вас есть компонентMyButton, он получаетlabelв качестве пропа, и вы хотите, чтобы родительский компонент мог передавать некоторые дополнительные атрибуты, напримерclassилиstyle. По умолчанию эти дополнительные атрибуты будут напрямую привязаны кMyButtonкорневому элементу (обычно<button>элемент).

Пример

// MyButton.vue
<template>
  <button :class="$attrs.class"> {{ label }} </button>
</template>

<script>
export default {
  props: ['label'],
  inheritAttrs: true
}
</script>

В этом примере, если родительский компонент передаётclassатрибут, он будет автоматически привязан кMyButtonиз<button>элементу.

inheritAttrs: falseРоль

Если вы не хотите, чтобы эти non-prop атрибуты автоматически привязывались к корневому элементу, вы можете установитьinheritAttrsустанавливается вfalse. Таким образом, вы можете вручную решить, как следует обрабатывать эти атрибуты.

Пример

// MyButton.vue
<template>
  <div>
    <button> {{ label }} </button>
    <span v-bind="$attrs">Дополнительные атрибуты</span>
  </div>
</template>

<script>
export default {
  props: ['label'],
  inheritAttrs: false
}
</script>

В этом примере non-prop атрибуты не будут привязаны к<button>элементу, а вместо этого привязаны к<span>элементу. Вы можете использоватьv-bind="$attrs"чтобы привязать атрибуты к любому элементу, который вы хотите.

Сценарии использования

  1. Пользовательская привязка атрибутов: Когда вы не хотите, чтобы non-prop атрибуты автоматически привязывались к корневому элементу, вы можете отключитьinheritAttrs, и вручную управлять тем, как эти атрибуты привязываются.

  2. Избежание конфликтов атрибутов: В некоторых случаях автоматически привязанные non-prop атрибуты могут конфликтовать с атрибутами дочернего компонента. ОтключениеinheritAttrsможет помочь избежать этой проблемы.

  3. Продвинутая разработка компонентов: При разработке сложных компонентов может потребоваться большая гибкость в обработке передачи и привязки атрибутов.inheritAttrs: falseобеспечивает эту гибкость.

Vue3 选项式 APIVue3 Options API

Другие расширения