Bileşen Örneği

Bileşen Örneği

bilgi

Bu sayfa, bileşenin genel örneği üzerinde tanımlanan yerleşik özellikler ve yöntemleri belgeliyor, yani this. Bu sayfada listelenen tüm özellikler yalnızca okunurdur (iç içe geçmiş $data özellikleri hariç).

$data

Bileşen tarafından reaktif hale getirilen data seçeneğinden dönen nesne. Bileşen örneği, veriler nesnesindeki özelliklere erişimi proxy'ler.

• Tür

  interface ComponentPublicInstance {
    $data: object
  }

$props

Bileşenin mevcut, çözülmüş özelliklerini temsil eden bir nesne.

• Tür

  interface ComponentPublicInstance {
    $props: object
  }

• Ayrıntılar

  Sadece props seçeneği aracılığıyla bildirilen özellikler dahil edilecektir. Bileşen örneği, özelliklere erişimi proxy'ler.

$el

Bileşen örneğinin yönettiği kök DOM düğümü.

• Tür

  interface ComponentPublicInstance {
    $el: Node | undefined
  }

• Ayrıntılar

  $el değeri, bileşen monte edildiğinde undefined olacaktır.

  • Tek kök öğeye sahip bileşenler için, $el o öğeye işaret edecektir.
  • Metin kökü olan bileşenler için, $el metin düğümüne işaret edecektir.
  • Birden fazla kök düğümü olan bileşenler için, $el, Vue'un bileşenin konumunu DOM'da takip etmek için kullandığı yer tutucu DOM düğümü olacaktır (bir metin düğümü veya SSR hidratasyon modunda bir yorum düğümü).
  ipucu

  Tutarlılık için, $el'e güvenmek yerine doğrudan öğelere erişim için şablon referansları kullanılması önerilir.

$options

Mevcut bileşen örneğini oluşturmak için kullanılan çözümlenmiş bileşen seçenekleri.

• Tür

  interface ComponentPublicInstance {
    $options: ComponentOptions
  }

• Ayrıntılar

  $options nesnesi, mevcut bileşen için çözümlenmiş seçenekleri açığa çıkarır ve bu olası kaynakların birleşim sonucudur:

  • Küresel mixinler
  • Bileşen extends temeli
  • Bileşen mixinleri

  Özelleştirilmiş bileşen seçeneklerini desteklemek için genellikle kullanılır:

  const app = createApp({
    customOption: 'foo',
    created() {
      console.log(this.$options.customOption) // => 'foo'
    }
  })

• Ayrıca bakınız app.config.optionMergeStrategies

$parent

Mevcut örneğin bir ana örneği varsa, ana örneği. Kök örneği için null olacaktır.

• Tür

  interface ComponentPublicInstance {
    $parent: ComponentPublicInstance | null
  }

$root

Mevcut bileşen ağacının kök bileşen örneği. Eğer mevcut örneğin ebeveynleri yoksa, bu değer kendisi olacaktır.

• Tür

  interface ComponentPublicInstance {
    $root: ComponentPublicInstance
  }

$slots

Ana bileşenden geçen slotları temsil eden bir nesne.

• Tür

  interface ComponentPublicInstance {
    $slots: { [name: string]: Slot }
  }
  
  type Slot = (...args: any[]) => VNode[]

• Ayrıntılar

  Genellikle render işlevleri yazarken manuel olarak kullanılır, ancak bir slotun mevcut olup olmadığını tespit etmek için de kullanılabilir.

  Her slot, adının karşılık geldiği anahtar altında bir dizi vnodes döndüren bir işlev olarak this.$slots üzerinde açığa çıkar. Varsayılan slot, this.$slots.default olarak açığa çıkar.

  Eğer bir slot kapsamlı slotsa, slot işlevlerine geçirilen argümanlar slotun slot özellikleri olarak mevcut olacaktır.

• Ayrıca bakınız Render Fonksiyonları - Slotları Render Etme

$refs

Şablon referansları aracılığıyla kaydedilmiş DOM öğeleri ve bileşen örneklerinin bir nesnesi.

• Tür

  interface ComponentPublicInstance {
    $refs: { [name: string]: Element | ComponentPublicInstance | null }
  }

• Ayrıca bakınız

  • Şablon referansları
  • Özel Özellikler - ref

$attrs

Bileşenin geçiş alanı özelliklerini içeren bir nesne.

• Tür

  interface ComponentPublicInstance {
    $attrs: object
  }

• Ayrıntılar

  Geçiş Alanları, ana bileşen tarafından geçirilen ancak çocuk tarafından bir özellik veya yayımlanan bir etkinlik olarak bildirilmemiş olan özellikler ve olay işleyicileridir.

  Varsayılan olarak, $attrs içerisindeki her şey yalnızca tek bir kök öğe varsa bileşenin kök elemanında otomatik olarak miras alınacaktır. Bu davranış, bileşenin birden fazla kök düğümü olduğunda devre dışı bırakılır ve inheritAttrs seçeneği ile açıkça devre dışı bırakılabilir.

• Ayrıca bakınız

  • Geçiş Alanları

$watch()

Gözlemciler oluşturmak için kurallı API.

• Tür

  interface ComponentPublicInstance {
    $watch(
      source: string | (() => any),
      callback: WatchCallback,
      options?: WatchOptions
    ): StopHandle
  }
  
  type WatchCallback<T> = (
    value: T,
    oldValue: T,
    onCleanup: (cleanupFn: () => void) => void
  ) => void
  
  interface WatchOptions {
    immediate?: boolean // varsayılan: false
    deep?: boolean // varsayılan: false
    flush?: 'pre' | 'post' | 'sync' // varsayılan: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }
  
  type StopHandle = () => void

• Ayrıntılar

  İlk argüman, gözlem kaynağıdır. Bu, bir bileşen özellik adı dizesi, basit bir noktayla ayrılmış yol dizesi veya bir getter işlevi olabilir.

  İkinci argüman, geri çağırma işlevidir. Geri çağırma, izlenen kaynağın yeni değerini ve eski değerini alır.

  • immediate: gözlemci oluşturulduğunda geri çağırmayı hemen tetikleyin. İlk çağrıda eski değer undefined olacaktır.
  • deep: kaynak bir nesne olduğunda derin gezinti yapılmasını zorlayın, böylece geri çağırma derin değişimlerde tetiklenir. Derin Gözlemciler bölümüne bakın.
  • flush: geri çağırmanın akış zamanlamasını ayarlayın. Geri Çağırma Akış Zamanlaması ve watchEffect() bölümüne bakın.
  • onTrack / onTrigger: gözlemcinin bağımlılıklarını debug edin. Gözlemci Hatası Ayıklama bölümüne bakın.

• Örnek

  Bir özellik adını izleyin:

  this.$watch('a', (newVal, oldVal) => {})

  Noktayla ayrılmış bir yolu izleyin:

  this.$watch('a.b', (newVal, oldVal) => {})

  Daha karmaşık ifadeler için getter kullanın:

  this.$watch(
    // her seferinde `this.a + this.b` ifadesi
    // farklı bir sonuç verirse, işleyici çağrılacaktır.
    // Sanki hesaplanan bir özelliği izliyormuşuz
    // hesaplanan özelliği tanımlamadan.
    () => this.a + this.b,
    (newVal, oldVal) => {}
  )

  Gözlemciyi durdurmak:

  const unwatch = this.$watch('a', cb)
  
  // daha sonra...
  unwatch()

• Ayrıca bakınız

  • Seçenekler - watch`
  • Kılavuz - Gözlemciler

$emit()

Mevcut örnek üzerinde özel bir olayı tetikler. Ek argümanlar, dinleyicinin geri çağırma işlevine geçecektir.

• Tür

  interface ComponentPublicInstance {
    $emit(event: string, ...args: any[]): void
  }

• Örnek

  export default {
    created() {
      // sadece olay
      this.$emit('foo')
      // ek argümanlarla
      this.$emit('bar', 1, 2, 3)
    }
  }

• Ayrıca bakınız

  • Bileşen - Olaylar
  • emits seçeneği`

$forceUpdate()

Bileşen örneğini yeniden oluşturmayı zorlar.

• Tür

  interface ComponentPublicInstance {
    $forceUpdate(): void
  }

• Ayrıntılar

  Vue'un tamamen otomatik reaktivite sistemi göz önüne alındığında, bunun nadiren gerektiği durumlar vardır. Tek ihtiyaç duyabileceğiniz durumlar, gelişmiş reaktivite API'leri ile açıkça oluşturulmuş reaktif olmayan bileşen durumunuz olduğunda olabilir.

$nextTick()

Küresel nextTick() fonksiyonunun örnek ile bağlı versiyonu.

• Tür

  interface ComponentPublicInstance {
    $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>
  }

• Ayrıntılar

  nextTick() fonksiyonunun küresel versiyonundan tek fark, this.$nextTick()'e geçirilen geri çağırmanın this bağlamının mevcut bileşen örneğine bağlı olmasıdır.

• Ayrıca bakınız nextTick()