defineExpose dan useAttrs
Mengekspos bagian internal komponen dengan defineExpose(), useAttrs() untuk atribut yang diteruskan.
defineExpose dan useAttrs adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Mengekspos dan Meneruskan
Dua alat lain melengkapi komunikasi komponen: defineExpose memungkinkan induk mengakses komponen anak, sedangkan useAttrs memberikan atribut tersisa yang dikirim oleh induk. Keduanya umum digunakan dalam komponen yang dapat digunakan kembali.
Komponen Secara Bawaan Bersifat Tertutup
Dengan <script setup>, tidak ada apa pun di dalam komponen yang dapat diakses dari ref templat induk. Enkapsulasi ini baik, tetapi terkadang induk memang perlu memanggil metode anak.
defineExpose untuk Membuka Akses
defineExpose secara eksplisit memublikasikan metode atau nilai tertentu kepada induk. Berikan objek berisi hal-hal yang ingin Anda bagikan.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Memanggil Metode yang Diekspos dari Induk
Induk mengambil komponen anak melalui ref templat dan memanggil metode yang diekspos. Hanya kunci yang diberikan kepada defineExpose yang terlihat.
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>
<template>
<Child ref="childRef" />
</template>Contoh Focus
Mengekspos metode focus memungkinkan induk memfokuskan input di dalam komponen khusus tanpa merusak enkapsulasi.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Apa Itu Atribut Pelimpahan?
Saat induk menempatkan atribut pada komponen Anda yang bukan prop atau peristiwa yang dideklarasikan (seperti class, id, atau data-*), atribut tersebut menjadi atribut pelimpahan.
Membaca Atribut dengan useAttrs
useAttrs() mengembalikan objek berisi semua atribut pelimpahan. Gunakan saat Anda perlu memeriksa atau memindahkannya dalam script.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Pelimpahan Otomatis
Secara bawaan, Vue menerapkan attrs pelimpahan ke elemen akar tunggal pada templat Anda. Jika komponen Anda memiliki satu akar div, class yang diberikan induk akan ditempatkan di sana secara otomatis.
Menonaktifkan Pelimpahan Otomatis
Saat Anda ingin menempatkan attrs di lokasi selain akar (misalnya pada input bagian dalam sebuah pembungkus), nonaktifkan pelimpahan otomatis dengan inheritAttrs: false dalam blok script biasa.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Meneruskan Atribut dengan v-bind
Setelah menonaktifkan pelimpahan otomatis, teruskan attrs ke elemen yang Anda pilih dengan v-bind="attrs". Ini adalah pola standar untuk pembungkus input.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Kapan Menggunakan Masing-Masing
- defineExpose: memungkinkan induk memanggil metode anak melalui ref templat.
- useAttrs + inheritAttrs: false + v-bind: mengendalikan dengan tepat di mana atribut dari induk ditempatkan.
Pemeriksaan Singkat
Uji pengetahuan Anda tentang expose dan attrs.
Rangkuman
Poin-poin penting:
defineExposememublikasikan metode/nilai tertentu kepada ref induk.- Attrs pelimpahan adalah atribut dari induk yang bukan prop atau peristiwa.
useAttrs()membacanya; pelimpahan otomatis menargetkan elemen akar.- Gunakan
inheritAttrs: false+v-bind="attrs"untuk mengarahkannya ke tempat lain.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “defineExpose dan useAttrs” gratis?
Ya — teks lengkap “defineExpose dan useAttrs” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “defineExpose dan useAttrs”?
Mengekspos bagian internal komponen dengan defineExpose(), useAttrs() untuk atribut yang diteruskan. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “defineExpose dan useAttrs” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pengantar script setup
- defineProps dan defineEmits
- defineExpose dan useAttrs
- Mengimpor dan Menggunakan Composable dalam script setup