# Свойство $attrs теперь содержит class и style
breaking
# Обзор
Свойство $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>
2
3
# Стратегия миграции
В компонентах, использующих inheritAttrs: false, следует убедиться что стилизация работает как и задумано. Если раньше полагались на специальное поведение для class и style, то некоторые визуальные стили могут быть нарушены, поскольку эти атрибуты теперь будут применяться к другому элементу.