# `$attrs` memuat `class` dan `style`
breaking

# Gambaran Umum

$attrs sekarang memuat seluruh atribut yang diteruskan pada sebuah komponen, termasuk class dan style.

# Perilaku pada Vue versi 2.x

Atribut class dan style ditangani secara khusus pada implementasi DOM virtual milik Vue versi 2. Oleh karena itu, kedua atribut tersebut tidak dimuat dalam $attrs, sementara atribut lainnya dimuat.

Sebuah efek samping dari penanganan tersebut muncul ketika menggunakan inheritAttrs: false:

Atribut dalam $attrs tidak lagi dimuat pada elemen utama secara otomatis, keputusan dikembalikan pada pengembang untuk menentukan tempat atribut dimuat.
Namun class dan style, yang bukan merupakan bagian dari $attrs, akan tetap dimuat dalam elemen utama dari komponen:

<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

Ketika digunakan seperti berikut:

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

...maka Vue akan menghasilkan HTML berikut:

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

1
2
3

# Perilaku pada Vue versi 3.x

$attrs memuat seluruh atribut, dimana hal tersebut mempermudah cara penanganan atribut pada elemen-elemen yang berbeda. Pada Vue versi 3.x, contoh di atas akan menghasilkan HTML berikut:

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

1
2
3

# Strategi Migrasi

Pada komponen-komponen yang menggunakan inheritAttrs: false, pastikan bahwa styling tetap berjalan sesuai keinginan Anda. Jika Anda sebelumnya bergantung pada penanganan khusus pada class dan style, beberapa tampilan mungkin saja akan rusak karena atribut-atribut tersebut mungkin saja sekarang diterapkan pada elemen lain.

# Lihat Juga

← Perilaku Penanganan Atribut $children →