Vue.js Single-File Components (SFC) ile Modüler ve Yeniden Kullanılabilir Kodlama

Bu rehberde ne öğreneceksiniz?

Bu rehberde Vue.js projelerinde Single-File Components (SFC) mimarisini öğreneceksiniz.
Props ve slot yapılarıyla temiz, ölçeklenebilir ve sürdürülebilir bileşenler geliştireceğiz.

---

🧠 Teknik Özet

Bu rehber Vue.js SFC mimarisini anlatır.
Amaç, arayüz kodlarını küçük parçalara ayırmaktır.
Çözüm, props ve slot destekli bileşen yapısıdır.

---

Ön Gereksinimler

• Node.js (v14.16.0 ve üzeri)
• Vue CLI (Vue 3 seçili)
• Temel HTML, CSS ve JavaScript bilgisi

---

1️⃣ Proje Verilerini Hazırlama

cd sfc-proje/src
mkdir data
touch data/tr-havalimanlari.js
touch data/eu-havalimanlari.js

• Bu adım örnek veri dosyalarını oluşturur.

---

// data/tr-havalimanlari.js
export default [
  { name: 'İstanbul Havalimanı', abbreviation: 'IST', city: 'İstanbul', state: 'TR' },
  { name: 'Esenboğa Havalimanı', abbreviation: 'ESB', city: 'Ankara', state: 'TR' },
  { name: 'Adnan Menderes Havalimanı', abbreviation: 'ADB', city: 'İzmir', state: 'TR' }
]

• Bu dosya Türkiye havalimanlarını temsil eder.

---

// data/eu-havalimanlari.js
export default [
  { name: 'Paris-Charles de Gaulle', abbreviation: 'CDG', city: 'Paris', state: 'Fransa' },
  { name: 'Münih Havalimanı', abbreviation: 'MUC', city: 'Münih', state: 'Almanya' }
]

• Bu veri seti Avrupa havalimanlarını içerir.

---

2️⃣ İlk Single-File Component Oluşturma

<!-- src/components/AirportCards.vue -->
<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation" class="card">
      <p>{{ airport.abbreviation }}</p>
      <p>{{ airport.name }}</p>
      <p>{{ airport.city }}, {{ airport.state }}</p>
    </div>
  </div>
</template>

• Bu template havalimanlarını kart olarak gösterir.

---

<script>
export default {
  name: 'AirportCards',
  props: {
    airports: {
      type: Array,
      required: true
    }
  }
}
</script>

• Bu yapı bileşeni tamamen yeniden kullanılabilir yapar.

---

<style scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card {
  border: 2px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
}
.card p:first-child {
  font-weight: bold;
  font-size: 1.4rem;
}
</style>

• Scoped stiller yalnızca bu bileşeni etkiler.

---

3️⃣ App.vue İçinde Props ile Veri Gönderme

<template>
  <h2>Türkiye Uçuşları</h2>
  <AirportCards :airports="trAirports" />

  <h2>Avrupa Uçuşları</h2>
  <AirportCards :airports="euAirports" />
</template>

• Bu kullanım kod tekrarını ortadan kaldırır.

---

<script>
import &#123; ref &#125; from 'vue'
import AirportCards from '@/components/AirportCards.vue'
import trData from '@/data/tr-havalimanlari.js'
import euData from '@/data/eu-havalimanlari.js'

export default {
  components: &#123; AirportCards &#125;,
  setup() {
    const trAirports = ref(trData)
    const euAirports = ref(euData)
    return { trAirports, euAirports }
  }
}
</script>

• Bu kod verileri reaktif hale getirir.

---

4️⃣ Slot Kullanarak Esnek Kart Yapısı

<!-- src/components/Card.vue -->
<template>
  <div class="card-cerceve">
    <slot />
  </div>
</template>

• Slot, içeriği dinamik yerleştirir.

---

<style>
.card-cerceve {
  border: 3px solid #333;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f9f9f9;
}
</style>

• Bu stil genel amaçlı kart görünümü sağlar.

---

<Card>
  <p>Toplam Havalimanı</p>
  <p>{{ trAirports.length }}</p>
</Card>

• Bu kullanım slot esnekliğini gösterir.

---

❓ Sıkça Sorulan Sorular (SSS)

1. SFC nedir? HTML, JavaScript ve CSS’in tek dosyada birleşmesidir.

2. Props ne zaman kullanılır? Üst bileşenden alt bileşene veri aktarırken kullanılır.

3. Slot ne işe yarar? Bileşen içeriğini dışarıdan özelleştirir.

4. Bu yapı büyük projelerde uygun mu? Evet, ölçeklenebilir mimariler için idealdir.

---

🎯 Sonuç

Bu rehberde Vue.js Single-File Components mimarisini öğrendiniz. Props ile veri akışı, slot ile esnek tasarım sağladınız.

Geliştirdiğiniz modern Vue.js uygulamalarını Rabisu Bulut altyapısında yüksek performansla yayınlayabilirsiniz 🚀