Bileşen Kaydı

Bileşen Kaydı

Bu sayfa, Bileşen Temelleri kısmını okuduğunuzu varsayıyor. Bileşenlere yeniyseniz önce orayı okuyun.

Bir Vue bileşeninin "kaydedilmesi" gerekir ki Vue, bir şablonda karşılaştığında uygulanabilirliğini nerede bulacağını bilsin. Bileşenleri kaydetmenin iki yolu vardır: küresel ve yerel.

Küresel Kayıt

Bileşenleri mevcut Vue uygulaması içinde küresel olarak kullanılabilir hale getirebiliriz .component() yöntemini kullanarak:

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // kaydedilen isim
  'MyComponent',
  // uygulama
  {
    /* ... */
  }
)

SFC'ler kullanıyorsanız, içe aktarılmış .vue dosyalarını kaydediyor olacaksınız:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component() yöntemi zincirleme olarak kullanılabilir:

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

Küresel olarak kayıtlı bileşenler, bu uygulama içindeki herhangi bir bileşenin şablonunda kullanılabilir:

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

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

Yerel Kayıt

Kullanışlı olmakla birlikte, küresel kaydın bazı dezavantajları vardır:

1. Küresel kayıt, kullanılmayan bileşenleri (yani "ağaç sarsma") kaldırma sistemlerini engeller. Eğer bir bileşeni küresel olarak kaydettiniz fakat uygulamanızda hiçbir yerde kullanmadıysanız, yine de son paket içerisinde yer alır.

2. Küresel kayıt, büyük uygulamalarda bağımlılık ilişkilerini daha az belirgin hale getirir. Bu, bir sunucu bileşenin uygulamasını bulmayı zorlaştırır. Bu, çok fazla küresel değişken kullanıma benzer şekilde uzun vadeli bakım kolaylığını etkileyebilir.

ipucu

Yerel kayıt, kaydedilen bileşenlerin erişilebilirliğini yalnızca mevcut bileşenle sınırlar. Bu, bağımlılık ilişkisini daha belirgin hale getirir ve ağaç sarsma dostudur.

`` ile SFC kullanırken, içe aktarılan bileşenler kaydetmeden yerel olarak kullanılabilir:

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

<template>
  <ComponentA />
</template>

`olmayan yerlerde,components` seçeneğini kullanmanız gerekecek:

import ComponentA from './ComponentA.js'

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

Yerel kayıt, components seçeneğini kullanarak yapılır:

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

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

<template>
  <ComponentA />
</template>

components nesnesindeki her özellik için anahtar, bileşenin kaydedilen adı olacaktır, değeri ise bileşenin uygulanabilirliğini içerecektir. Yukarıdaki örnek, ES2015 özellik kısaltmasını kullanmakta olup şu şekilde de ifade edilebilir:

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

Dikkat edin ki yerel olarak kayıtlı bileşenler, alt bileşenlerde değil de geçerlidir. Bu durumda, ComponentA yalnızca mevcut bileşene erişilebilir olacaktır, çocuk veya alt bileşenlerine değil.

Bileşen Adı Yazım Kuralları

Kılavuz boyunca bileşenleri kaydederken PascalCase adları kullanıyoruz. Bunun nedeni:

1. PascalCase adları geçerli JavaScript tanımlayıcılarıdır. Bu, bileşenleri JavaScript'te içe aktarmayı ve kaydetmeyi kolaylaştırır. Ayrıca IDE'lerin otomatik tamamlama işlevine yardımcı olur.

2. ``, şablonlarda bunun bir Vue bileşeni olduğunu gösterir, yerel HTML öğesinden farklı olduğunu belirginleştirir. Ayrıca, Vue bileşenlerini özel öğelerden (web bileşenleri) ayırır.

bilgi

Bu, SFC veya dize şablonları ile çalışırken önerilen stildir. Ancak, DOM İçinde Şablon Ayrıştırma Durumları kısmında tartışıldığı gibi, PascalCase etiketler DOM içindeki şablonlarda kullanılamıyor.

Neyse ki, Vue, kebab-case etiketlerini PascalCase ile kaydedilen bileşenlere çözümleme desteği sağlamaktadır. Bu, MyComponent olarak kaydedilen bir bileşenin hem hem de aracılığıyla şablonda referans alınabileceği anlamına gelir. Bu, şablon kaynağından bağımsız olarak aynı JavaScript bileşeni kayıt kodunu kullanmamıza olanak tanır.