defineExpose ve useAttrs
defineExpose() ile bileşen iç yapılarını dışa açma, geçişli özellikler için useAttrs().
defineExpose ve useAttrs, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Açığa Çıkarma ve İletme
Bileşenler arası iletişimi tamamlayan iki araç daha vardır: defineExpose, üst bileşenin alt bileşene erişmesini sağlar; useAttrs ise üst bileşenin gönderdiği geriye kalan öznitelikleri verir. Her ikisi de yeniden kullanılabilir bileşenlerde yaygın olarak kullanılır.
Bileşenler Varsayılan Olarak Kapalıdır
<script setup> ile bileşenin içindeki hiçbir şeye üst bileşendeki şablon ref'i üzerinden erişilemez. Bu kapsülleme yararlıdır; ancak bazen üst bileşenin meşru olarak bir alt bileşen yöntemini çağırması gerekir.
defineExpose ile Bir Kapı Açma
defineExpose, seçilen yöntemleri veya değerleri üst bileşene açıkça sunar. Paylaşmak istediklerinizi içeren bir nesne gönderin.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Üst Bileşenden Açığa Çıkarılan Yöntemleri Çağırma
Üst bileşen, alt bileşeni bir şablon ref'i ile alır ve açığa çıkarılan yöntemi çağırır. Yalnızca defineExpose'a gönderilen anahtarlar görünür.
<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>Odaklama Örneği
Bir focus yöntemini açığa çıkarmak, üst bileşenin kapsüllemeyi bozmadan özel bir bileşenin içindeki bir girdiye odaklanmasını sağlar.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Devreden Öznitelikler Nedir?
Üst bileşen, bildirilmiş bir prop veya olay olmayan bir özniteliği (örneğin class, id veya data-*) bileşeninize eklediğinde bu öznitelik devreden öznitelik olur.
useAttrs ile Attrs Okuma
useAttrs(), tüm devreden öznitelikleri içeren bir nesne döndürür. Bunları script içinde incelemeniz veya başka bir yere taşımanız gerektiğinde kullanın.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Otomatik Devretme
Vue, varsayılan olarak devreden attrs'ları şablonunuzun tek kök öğesine uygular. Bileşeninizde tek bir kök div varsa üst bileşenin sağladığı class otomatik olarak oraya eklenir.
Otomatik Devretmeyi Devre Dışı Bırakma
Attrs'ları kök öğe yerine başka bir yere, örneğin bir sarmalayıcı içindeki iç girdiye yerleştirmek istediğinizde normal bir script bloğunda inheritAttrs: false ile otomatik devretmeyi kapatın.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>v-bind ile Attrs İletme
Otomatik devretmeyi kapattıktan sonra attrs'ları v-bind="attrs" ile seçtiğiniz öğeye iletin. Bu, girdi sarmalayıcıları için standart yöntemdir.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Her Birini Ne Zaman Kullanmalı?
- defineExpose: üst bileşenin bir şablon ref'i aracılığıyla alt bileşen yöntemlerini çağırmasını sağlar.
- useAttrs + inheritAttrs: false + v-bind: üst bileşenin sağladığı özniteliklerin tam olarak nereye yerleşeceğini denetler.
Hızlı Kontrol
defineExpose ve attrs konusundaki bilginizi sınayın.
Özet
Önemli noktalar:
defineExpose, seçilen yöntemleri ve değerleri üst bileşenin ref'ine sunar.- Devreden attrs'lar, üst bileşenden gelen ve prop veya olay olmayan özniteliklerdir.
useAttrs()bunları okur; otomatik devretme kök öğeyi hedefler.- Bunları başka bir yere yönlendirmek için
inheritAttrs: false+v-bind="attrs"kullanın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“defineExpose ve useAttrs” dersi ücretsiz mi?
Evet — “defineExpose ve useAttrs” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“defineExpose ve useAttrs” dersinde ne öğreneceğim?
defineExpose() ile bileşen iç yapılarını dışa açma, geçişli özellikler için useAttrs(). Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“defineExpose ve useAttrs” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- script setup'e Giriş
- defineProps ve defineEmits
- defineExpose ve useAttrs
- script setup'te Composable'ları İçe Aktarma ve Kullanma