$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>якщо використовувати його так:
<my-component id="my-id" class="my-class"></my-component>...згенерує такий HTML:
<label class="my-class">
<input type="text" id="my-id" />
</label>3.x Поведінка
$attrs містить усі атрибути, що полегшує їх застосування до іншого елемента. Наведений вище приклад тепер генерує наступний HTML:
<label>
<input type="text" id="my-id" class="my-class" />
</label>Стратегія міграції
Переконайтеся, що у компонентах, які використовують inheritAttrs: false, стилі все ще працюють належним чином. Якщо ви раніше покладалися на спеціальну поведінку class та style, то деякі візуальні ефекти можуть бути втрачені, оскільки ці атрибути тепер можуть бути застосовані до іншого елемента.
Прапор міграції збірки: INSTANCE_ATTRS_CLASS_STYLE