Vue.js

# Свойство $attrs теперь содержит class и style
кардинальное изменение

# Обзор

Свойство $attrs теперь содержит все атрибуты, передаваемые компоненту, в том числе class и style.

# Поведение в 2.x

Атрибуты class и style получали специальную обработку в реализации виртуального DOM во Vue 2. По этой причине они не содержались в свойстве $attrs, в то время как остальные атрибуты были.

Побочный эффект этого проявлялся при использовании inheritAttrs: false:

  • Атрибуты в свойстве $attrs больше не добавлялись автоматически к корневому элементу, оставляя решение за разработчиком, куда их следует добавлять.

  • Но атрибуты class и style, не являясь частью $attrs, всё равно применялись к корневому элементу компонента:

    <template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    при таком использовании:

    <my-component id="my-id" class="my-class"></my-component>
    1

    ...получался следующий HTML:

    <label class="my-class">
  <input type="text" id="my-id" />
</label>
    1
    2
    3

# Поведение в 3.x

Свойство $attrs содержит все атрибуты, что облегчает их применение к разным элементам. Для примера выше будет сгенерирован следующий HTML:

<label>
  <input type="text" id="my-id" class="my-class" />
</label>
1
2
3

# Стратегия миграции

В компонентах, использующих inheritAttrs: false, следует убедиться что стилизация работает как и задумано. Если раньше полагались на специальное поведение для class и style, то некоторые визуальные стили могут быть нарушены, поскольку эти атрибуты теперь будут применяться к другому элементу.

Флаг сборки для миграции: INSTANCE_ATTRS_CLASS_STYLE

# См. также

← Удалено свойство $children →