Vue.js

# $attrs incluye class & style
breaking

# Visión General

$attrs ahora contiene todos atributos pasados a un componente, incluye class y style.

# Comportamiento en 2.x

Los atributos class y style obtienen unos tratamientos especiales en la implementación de DOM virtual en Vue 2. Por esa razón, no son incluidos en $attrs, mientras todos otros atributos son incluidos.

Un efecto secundario de este se manifiesta cuando se utiliza inheritAttrs: false:

  • Los atributos en $attrs ya no son agregados automáticamente al elemento raíz, dejándoselo al desarrollador para decidir el lugar para agregarlos.
  • Pero class y style, no siendo parte de $attrs, será todavía aplicado al elemento raíz del 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

cuando está utilizado como esto:

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

...generará HTML como esto:

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

# Comportamiento en 3.x

$attrs contiene todos atributos, lo que hace posible aplicar todos ellos a un elemento diferente. El ejemplo arriba ahora genera el HTML como lo siguiente:

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

# Estrategia para Migración

En componentes que utiliza inheritAttrs: false, asegúrese de que los estilos todavía funcionan como se espera. Si anteriormente confía en el comportamiento especial de class y style, algunos partes de su interfaz de usuario podrían funcionar anormalmente, debido a que ahora estos atributos podrían haberse aplicado a un otro elemento.

Indicadores de compilación de migración: INSTANCE_ATTRS_CLASS_STYLE

# Vea también

← $children →