Vue.js

# $attrs inclui class & style
breaking

# Visão Geral

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

# Comportamento v2.x

Os atributos class e style recebem algum tratamento especial na implementação do DOM virtual do Vue 2. Por essa razão, eles não são incluídos em $attrs, enquanto todos os outros atributos são.

Um efeito colateral disso se manifesta ao usar inheritAttrs: false:

  • Atributos em $attrs não são mais adicionados automaticamente ao elemento raiz, deixando para o desenvolvedor decidir onde adicioná-los.
  • Mas class e style, não sendo parte de $attrs, ainda serão aplicados ao elemento raiz do componente:
<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

quando usado assim:

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

...irá gerar este HTML:

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

# Comportamento v3.x

$attrs contém todos atributos, o que facilita a aplicação de todos eles a um elemento diferente. O exemplo acima agora gera o seguinte HTML:

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

# Estratégia de Migração

Em componentes que usam inheritAttrs: false, certifique-se de que o estilo ainda funcione como pretendido. Se você confiava anteriormente no comportamento especial de class e style, alguns visuais podem ser quebrados, pois esses atributos agora podem ser aplicados a outro elemento.

Sinalizador na compilação de migração: INSTANCE_ATTRS_CLASS_STYLE

# Veja também

← $children →