Skip to content
The translation is synced to the docs on of which the commit hash is 8a7fb04.

$attrs inclui class e style
rutura

Visão Geral

$attrs agora contém todos os atributos passados à um componente, incluindo class e style.

Comportamento da 2.x

Os atributos class e style são manipulados de maneira especial na implementação do DOM virtual da Vue 2. Por esta razão, não estão incluídas na $attrs, enquanto todos os outros atributos estão.

Um efeito secundário disto manifesta-se quando usamos inheritAttrs: false:

  • Os atributos na $attrs não mais são automaticamente adicionados ao elemento de raiz, deixando-o ao programador decidir onde adicioná-los.
  • Mas class e style, não sendo parte de $attrs, ainda serão aplicados ao elemento de raiz do componente:
vue
<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

quando usado desta maneira:

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

...gerará este HTML:

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

Comportamento da 3.x

$attrs contém todos os atributos, o que torna mais fácil aplicar todos eles à um elemento diferente. O exemplo de cima agora gera o seguinte HTML:

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

Estratégia de Migração

Nos componentes que usam inheritAttrs: false, devemos certificar-nos de que a estilização ainda funciona como pretendida. Se anteriormente dependíamos do comportamento especial de class e style, alguns visuais podem estar quebrados visto que estes atributos agora podem ser aplicados à um outro elemento.

Opção da Construção de Migração: INSTANCE_ATTRS_CLASS_STYLE

Consulte também