# `$attrs` inclut `class` & `style`
breaking

# Aperçu

$attrs contient maintenant tous les attributs passés à un composant, y compris class et style.

# Comportement 2.x

Les attributs class et style bénéficient d'un traitement spécial dans l'implémentation du DOM virtuel de Vue 2. Pour cette raison, ils ne sont pas inclus dans $attrs, alors que tous les autres attributs le sont.

Un effet secondaire de ceci se manifeste quand on utilise inheritAttrs :false` :

Les attributs de $attrs ne sont plus automatiquement ajoutés à l'élément racine, laissant au développeur le soin de décider où les ajouter.
Mais class et style, ne faisant pas partie de $attrs, seront toujours appliqués à l'élément racine du composant :

<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

lorsqu'il est utilisé comme ceci :

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

...va générer ce HTML :

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

1
2
3

# Comportement 3.x

$attrs contient tous les attributs, ce qui facilite leur application à un élément différent. L'exemple ci-dessus génère maintenant le HTML suivant :

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

1
2
3

# Stratégie de migration

Dans les composants qui utilisent inheritAttrs : false, assurez-vous que le style fonctionne toujours comme prévu. Si vous vous reposiez auparavant sur le comportement spécial de class et style, certains visuels pourraient être cassés car ces attributs pourraient maintenant être appliqués à un autre élément.

# Voir aussi

← Comportement de coercition des attributs $children →