$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:

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

quando usado desta maneira:

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

...gerará este 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:

<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

• RFC Relevante
• Guia de Migração - $attrs inclui class e style
• Guia de Migração - Mudanças na API de Funções de Interpretação
• Guia de Migração - Nova Opção emits
• Guia de Migração - modificador .native removido