$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

Дивіться також #

• Відповідний RFC
• Гід з міграції - видалено $listeners
• Гід з міграції - нова опція випромінювань
• Гід з міграції - видалено модифікатор .native
• Гід з міграції - зміни в API функцій рендерингу