Panduan Tentang Atribut $attrs Vue

Pernahkah Anda bertanya-tanya apa yang terjadi pada props yang tidak didukung oleh komponen Anda? Ini disebut "atribut fallthrough" dan tutorial ini akan menjelaskan apa itu, mengapa Anda perlu mengetahuinya, dan bagaimana menggunakannya. Tapi sebelum Anda mulai:

Versi:

Vue.js 2

Catatan:

Tutorial ini mengasumsikan pengetahuan dasar tentang cara kerja props dan komponen Vue.

Mari kita mulai tanpa penundaan lebih lanjut.

$attrs

Ini adalah atribut fault trough. Namun demikian, pada dasarnya berisi semua props tidak terdefinisi yang Anda gunakan.

Komponen tersebut:

<template>
  <span>{{ label }}</span>
</template>
<script>
export default { 
  name: 'BaseLabel', 
  props: ['label'] 
}
</script>

Bagaimana jika Anda menyebutnya seperti ini:

<BaseLabel :not-the-label-prop="something" :label="lol"></BaseLabel>

Jika Anda melakukan ini, properti yang tidak dideklarasikan akan ditetapkan ke atribut fall through.

Dan Anda dapat mengaksesnya dengan melakukannya:

<template>
  <span>{{ label }}</span>
</template>
<script>
export default { 
  name: 'BaseLabel', 
  props: ['label'],
  mounted() { 
    console.log(this.$attrs.notTheLabelProp)
  }
}
</script>

Sekarang, jika Anda ingin melewatkan lebih banyak props yang tidak terdefinisi dengan sesuatu seperti:

<BaseLabel :prop-one="1" :prop-two="2" :label="lol"></BaseLabel>

Itu juga disimpan dalam atribut $attrs. Juga, mencatat seluruh objek $attrs terlihat seperti ini:

{ propOne : "1", propTwo: "2" }

Perhatikan bahwa :label="lol" tidak ada dalam atribut $attrs. Ini karena itu didefinisikan dalam komponen dan tidak "falls through".

Bersih dan semua sahabat, bagaimana ini bisa membantu?

Kasus dasar di mana menggunakan $attrs berguna

Karena saya membuat pembungkus untuk komponen yang berbeda, sangat membosankan untuk melewatkan semua props yang saya butuhkan secara manual.
Untuk membuat bagian transparan.

Gunakan $attrs untuk meneruskan semua props ke komponen yang wrapped atau transparan

Untuk menggunakan atribut fall through:

<template>
  <span v-bind="$attrs">{{ label }}</span>
</template>
<script>
export default { 
  name: 'BaseLabel', 
  props: ['label'],
}
</script>

v-bind=”$attrs” Magic macam apa ini?

Tentu, saat menggunakan props, Anda pernah melihat sesuatu seperti sebelumnya:

:label=”label”

Kecil kemungkinan Anda melihat ini:

v-bind:label=”label”

Dan saya telah melihat ini lebih sedikit lagi:

v-bind=”{ label: label }”

Namun, ketiganya sama. Dan Anda bahkan dapat melakukan sesuatu seperti ini:

v-bind=”{ label: label, someOtherLabel: somethingElse }”

Seperti yang Anda ingat dari contoh sebelumnya, apa yang saya tetapkan ke v-bind memiliki struktur yang sama dengan $attrs.

Mari kita lihat contoh sederhana yang menunjukkan bagaimana ini dapat digunakan.

Contoh yang berguna

<template>
  <input type="text" v-bind="$attrs">
</template>
<script>
export default { 
  name: 'BaseTextInput'
}
</script>

Apa yang sedang terjadi disini?

Ini adalah teks input html sederhana. Perhatikan bagaimana v-bind=$attrs digunakan. Menggunakan komponen ini dalam prop seperti ini:

<BaseTextInput placeholder="Some placeholder" name="name">

Semua props yang Anda gunakan diteruskan ke input teks tanpa harus mendefinisikan props di dalam komponen. Rapi ya?

Kesimpulan

$attrs Vue adalah trik keren untuk membuat hidup kita lebih mudah. Anda dapat menggunakannya untuk membungkus komponen pihak ketiga dengan mudah atau membuat komponen transparan.

Tolong lakukan yang terbaik. Sampai petualangan berikutnya.