Vue.js Bileşenleri (Components) ve Veri İletişimi (1 Görüntüleyici)

    const app = Vue.createApp({
        // Ana uygulama data ve metotları buraya gelir...
        data() {
            return {
                anaMesaj: 'Ana Uygulama Mesajı',
                anaSayac: 0
            }
        }
        // ...
    });

    // Yeni bir 'merhaba-mesaj' bileşeni tanımlama ve global olarak kaydetme
    app.component('merhaba-mesaj', { // Bileşen adı (kebab-case önerilir)

        // Bileşenin kendi HTML şablonu
        template: '<div><p>{{ mesaj }}</p><button @click="sayaciArtir">Bileşen Sayacını Artır</button><p>Bileşen Sayacı: {{ sayac }}</p></div>',

        // Bileşenin kendi reaktif verisi (bir fonksiyon dönmeli!)
        data() {
            return {
                mesaj: 'Merhaba Bileşen!',
                sayac: 0 // Bu sayaç sadece bu bileşene aittir
            }
        },

        // Bileşenin kendi metotları
        methods: {
            sayaciArtir() {
                this.sayac++;
            }
        }
    });

    // Vue uygulamasını #app elementine bağla
    app.mount('#app');

<div id="app">
    <h1>Ana Uygulama</h1>
    <p>{{ anaMesaj }}</p> {# Ana uygulama data'sından #}

    <hr>

    <h2>Bileşen Kullanımı</h2>
    {# Tanımladığımız 'merhaba-mesaj' bileşenini kullan #}
    <merhaba-mesaj></merhaba-mesaj> {# Bileşen buraya render edilecek #}

    <merhaba-mesaj></merhaba-mesaj> {# Aynı bileşeni tekrar kullan! Kendi data ve sayacı olacak #}

</div>
{# Yukarıdaki Vue JS kodunun bu HTML dosyasında script etiketleri içinde olduğunu varsayın #}

    // Ürün Kartı bileşeni
    app.component('urun-karti', {
        // Bu bileşenin beklediği verileri (props) tanımla
        props: [
            'urunAdi', // String beklenen basit tanım
            'urunFiyat'
            // veya daha detaylı: { urunFiyat: Number } şeklinde tip belirterek
        ],
        template: `
            <div class="urun-karti">
                <h3>{{ urunAdi }}</h3> {# Propsları şablonda kullan #}
                <p>Fiyat: {{ urunFiyat }} TL</p>
                <button>Sepete Ekle</button>
            </div>
        ` // Şablon genellikle tek bir kök element içermeli
    });

<div id="app">
    <h1>Ürün Listesi</h1>

    {# Ana uygulama data'sında bir ürün listesi olsun #}
    {# data() { return { urunler: [{ad: 'Laptop', fiyat: 15000}, {ad: 'Klavye', fiyat: 500}] } } #}

    {# v-for ile ürün listesini gez #}
    <ul>
        <li v-for="urun in urunler" :key="urun.ad">
            {# urun-karti bileşenini kullan ve propsları gönder #}
            {# urunAdi prop'una urun objesinin ad özelliğini bağla #}
            {# urunFiyat prop'una urun objesinin fiyat özelliğini bağla #}
            <urun-karti
                :urun-adi="urun.ad"    {# Kebab-case HTML attribute -> camelCase JS prop #}
                :urun-fiyat="urun.fiyat"
            ></urun-karti>
        </li>
    </ul>

</div>
{# İlgili Vue JS kodu bu HTML dosyasında script etiketleri içinde olmalı #}

    // Ürün Kartı bileşeninin güncellenmiş hali (sepete ekleme özelliği ekliyoruz)
    app.component('urun-karti', {
        props: ['urunAdi', 'urunFiyat'],
        template: `
            <div class="urun-karti">
                <h3>{{ urunAdi }}</h3>
                <p>Fiyat: {{ urunFiyat }} TL</p>
                {# Buton tıklaninca 'sepete-ekle' adında bir olay yayınla #}
                {# Argüman olarak ürünün adını (this.urunAdi) Parent'a gönder #}
                <button @click="sepeteEkle">Sepete Ekle</button>
            </div>
        `,
        methods: {
            sepeteEkle() {
                // 'sepete-ekle' adında özel bir olay yayınla
                // Olayla birlikte 'this.urunAdi' değerini de Parent'a gönder
                this.$emit('sepete-ekle', this.urunAdi);
            }
        }
    });

<div id="app">
    <h1>Ürün Listesi</h1>
    <p>Sepetiniz: {{ sepet.length }} ürün</p> {# Ana uygulama data'sında 'sepet' listesi olsun #}

    <ul>
        <li v-for="urun in urunler" :key="urun.ad">
            <urun-karti
                :urun-adi="urun.ad"
                :urun-fiyat="urun.fiyat"
                {# urun-karti bileşeninin 'sepete-ekle' olayını dinle #}
                {# Olay olduğunda ana uygulamadaki 'sepeteUrunEkle' metodunu çağır #}
                {# $event, child tarafından emit edilen veriyi temsil eder (urunAdi) #}
                @sepete-ekle="sepeteUrunEkle($event)"
            ></urun-karti>
        </li>
    </ul>

</div>
[B]<script>[/B]
     const app = Vue.createApp({
        data() {
            return {
                urunler: [{ad: 'Laptop', fiyat: 15000}, {ad: 'Klavye', fiyat: 500}],
                sepet: [] // Sepet data'sı
            }
        },
        methods: {
            sepeteUrunEkle(eklenenUrunAdi) { // Child'dan gelen 'urunAdi' $event olarak bu metoda gelir
                console.log(eklenenUrunAdi + " sepete eklendi!");
                this.sepet.push(eklenenUrunAdi); // Sepet data'sına ekle (örnek)
            }
        }
        // Bileşen tanımı buraya veya yukarıya gelecek
    });

    // urun-karti bileşen tanımı yukarıdaki gibi burada olmalı

    app.mount('#app');
[B]</script>[/B]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js Bileşen Örneği</title>
    {# Vue 3 CDN linki #}
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .urun-karti {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            width: 200px;
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <div id="app">
        <h1>Ürün Listesi ve Sepetim</h1>
        <p>Sepetinizde [B]{{ sepet.length }}[/B] ürün var.</p> {# Ana uygulama data'sındaki sepetin boyutu #}
        <ul>
            <li v-for="(item, index) in sepet" :key="index">{{ item }}</li> {# Sepet içeriğini de listeleyelim #}
        </ul>

        <hr>

        {# Ürünleri listele ve her biri için urun-karti bileşeni kullan #}
        <div class="urun-listesi">
            <urun-karti
                v-for="urun in urunler" {# v-for ile urunler listesini gez #}
                :key="urun.id" {# Key olarak benzersiz ID kullan #}
                :urun-id="urun.id" {# id prop'u gönder #}
                :urun-adi="urun.ad" {# ad prop'u gönder #}
                :urun-fiyat="urun.fiyat" {# fiyat prop'u gönder #}
                @sepete-ekle="sepeteUrunEkle" {# urun-karti'ndan gelen 'sepete-ekle' olayını dinle, sepeteUrunEkle metodunu çağır #}
            ></urun-karti>
        </div>

    </div>

    [B]<script>[/B]
        const app = Vue.createApp({
            data() {
                return {
                    urunler: [ // Ana uygulama data'sındaki ürün listesi
                        { id: 1, ad: 'Laptop', fiyat: 15000 },
                        { id: 2, ad: 'Klavye', fiyat: 500 },
                        { id: 3, ad: 'Fare', fiyat: 200 }
                    ],
                    sepet: [] // Ana uygulama data'sındaki sepet listesi
                }
            },
            methods: {
                // urun-karti bileşeninden gelen 'sepete-ekle' olayını yakalayan metot
                // Child'dan emit edilen veri (urunId) otomatik olarak ilk parametre ($event) gelir
                sepeteUrunEkle(urunId) {
                    // Sepete eklenen ürünün bilgilerini bul (opsiyonel, ID'yi saklamak da yeterli olabilir)
                    const eklenenUrun = this.urunler.find(urun => urun.id === urunId);
                    if (eklenenUrun) {
                         this.sepet.push(eklenenUrun.ad); // Ürün adını sepete ekle (Örnek basitlik için)
                         console.log(`${eklenenUrun.ad} sepete eklendi (ID: ${urunId})`);
                         alert(`${eklenenUrun.ad} sepete eklendi!`);
                    }
                }
            }
            // Bileşen tanımı aşağıda yapılacak
        });

        // urun-karti bileşen tanımı (Global kayıt)
        app.component('urun-karti', {
            // Beklediği propslar (ebeveynden gelecek veriler)
            props: {
                urunId: Number, // ID number tipinde bekleniyor
                urunAdi: String, // Ad String tipinde bekleniyor
                urunFiyat: Number // Fiyat Number tipinde bekleniyor
            },
            template: `
                <div class="urun-karti">
                    <h3>{{ urunAdi }}</h3> {# Propsları şablonda kullan #}
                    <p>Fiyat: {{ urunFiyat }} TL</p>
                    {# Butona tıklandığında 'sepete-ekle' olayını yayınla #}
                    {# Olayla birlikte urunId prop'unu (ürünün ID'sini) ebeveyne gönder #}
                    <button @click="sepeteEkle">Sepete Ekle</button>
                </div>
            `,
            methods: {
                sepeteEkle() {
                    // 'sepete-ekle' adında özel bir olay yayınla
                    // Olayla birlikte 'this.urunId' prop'unun değerini (ürünün ID'sini) ebeveyne gönder
                    this.$emit('sepete-ekle', this.urunId);
                }
            }
        });

        // Vue uygulamasını #app elementine bağla
        app.mount('#app');
    [B]</script>[/B]

</body>
</html>

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <button @click="handleClick">Tıkla</button>
  </div>
</template>

<script>
export default { // JavaScript mantığı
  props: ['title'],
  methods: {
    handleClick() {
      alert('Buton Tıklandı!');
    }
  }
}
</script>

<style scoped> // Stiller sadece bu bileşene uygulanır
.my-component {
  border: 1px solid blue;
}
</style>