Bileşen Kaydı ​

Bu sayfa, Bileşenlerin Temelleri'ni okuduğunuzu varsayar. Bileşenlere yeniyseniz, önce bunu okuyun.

Bir Vue bileşeninin, bir şablonda kullanıldığında Vue’nün bileşeni nereden bulacağını bilmesi için "kaydedilmesi" gerekir. Bileşenleri kaydetmenin iki yolu vardır: küresel ve yerel.

Küresel Kayıt ​

.component() fonksiyonuyla bileşenleri mevcut Vue uygulamasında küresel olarak kullanılabilir hale getirebiliriz:

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // kayıtlı ad
  'MyComponent',
  // bileşen tanımı
  {
    /* ... */
  }
)

SFC’ler (Tek Dosyalı Bileşenler) kullanılıyorsa, içe aktarılan .vue dosyalarını kaydetmiş olursunuz:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component() fonksiyonu art arda zincirlenebilir:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

Küresel olarak kaydedilen bileşenler, bu uygulamadaki herhangi bir bileşenin şablonunda kullanılabilir:

<!-- bu, uygulama içindeki herhangi bir bileşende çalışır -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

Bu durum tüm alt bileşenler için de geçerlidir; yani bu üç bileşenin tamamı birbirlerinin içinde de kullanılabilir olacaktır.

Yerel Kayıt ​

Kullanışlı olmasına rağmen küresel kayıtlamanın birkaç dezavantajı vardır:

1. Küresel kayıt, build sistemlerinin kullanılmayan bileşenleri kaldırmasını (diğer adıyla “tree-shaking”) engeller. Bir bileşeni küresel olarak kaydedip uygulamanızın hiçbir yerinde kullanmasanız bile, bu bileşen final bundle'a (derleme çıktısına) dahil edilir.

2. Küresel kayıt, büyük uygulamalarda bağımlılık ilişkilerini daha az açık hale getirir. Bir üst bileşenin kullandığı alt bileşenin tanımını bulmayı zorlaştırır. Bu durum, çok fazla küresel değişken kullanmaya benzer şekilde uzun vadeli sürdürülebilirliği olumsuz etkileyebilir.

Yerel kayıt, kaydedilen bileşenlerin erişimini yalnızca mevcut bileşen ile sınırlar. Bu, bağımlılık ilişkisini daha açık hale getirir ve "tree-shaking" açısından daha uygundur.

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

components nesnesindeki her bir özellik için anahtar, bileşenin kayıtlı adı olurken; değer bileşen tanımını içerir. Yukarıdaki örnek ES2015 özellik kısaltmasını kullanmaktadır ve şununla eşdeğerdir:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

Şunu unutmayın: yerel olarak kaydedilen bileşenler, alt bileşenlerde kullanılamaz. Bu durumda ComponentA, yalnızca mevcut bileşen içinde kullanılabilir; onun alt bileşenlerinde kullanılamaz.

Bileşen İsimlendirme Stili ​

Rehber boyunca bileşenleri kaydederken PascalCase isimler kullanıyoruz. Bunun nedeni:

1. PascalCase isimler geçerli JavaScript identifier’larıdır. Bu, bileşenleri JavaScript içinde import etmeyi ve kaydetmeyi kolaylaştırır. Ayrıca IDE’lerde auto-completion (otomatik tamamlama) desteğini geliştirir.

2. <PascalCase /> kullanımı, bunun yerel bir HTML elementi değil bir Vue bileşeni olduğunu şablonlarda daha net hale getirir. Ayrıca Vue bileşenlerini custom element’lerden (web components) ayırt etmeyi sağlar.

Bu stil, SFC (Tek Dosyalı Bileşen) veya string şablonlar ile çalışırken önerilen yaklaşımdır. Ancak DOM içi Şablon Ayrıştırma Kısıtlamaları bölümünde açıklandığı gibi, PascalCase etiketler DOM içi şablonlarda kullanılamaz.

Neyse ki Vue, PascalCase kullanılarak kaydedilen bileşenleri kebab-case etiketlere çözümlemeyi destekler. Bu, MyComponent olarak kaydedilen bir bileşenin Vue şablonunda (veya Vue tarafından render edilen bir HTML elementinin içinde) hem <MyComponent> hem de <my-component> olarak kullanılabileceği anlamına gelir. Bu sayede şablon kaynağı ne olursa olsun aynı JavaScript bileşen kayıt kodunu kullanabiliriz.