Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Componentler arası iletişimi anlamak

isset

Jetstreamde componentler arasında kullanınıcının profilinde kullanılan bir modal var bunu kurcalayarak nasıl yaptığını mantığını kavramaya çalışıyorum
DeleteUSerform içinde bu modal kullanılmış aldım bunu kurcaladım
Dashboard vue içinde testler yapıyorum

<script setup>
import { ref } from 'vue';
import AppLayout from '@/Layouts/AppLayout.vue';

import DialogModal from '@/Components/DialogModal.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import DangerButton from '@/Components/DangerButton.vue';


const showModal = ref(false);  // Bu değişken, modal'ın görünürlüğünü kontrol etmek için kullanılır. başlangıcta gizle


const closeModal = () => {   //Bu fonksiyon, modal'ı kapatmak için showModal değişkenini false yapar.
    showModal.value = false;
};

const openModal = () => {  //Bu fonksiyon, modal'ı açmak için showModal değişkenini true yapar.
    showModal.value = true;
};

</script>

Yukarısı çok mantıklı template içindede (gereksiz kodları temizledim )

 <DangerButton @click="openModal">  <!-- "DangerButton" üzerine tıklandığında openModal fonksiyonu çalıştır
                        modal aç
    </DangerButton>
                
            <DialogModal :show="showModal" @close="closeModal">  modal'ın görünürlüğünü kontrol 
                            <template #title>
                                Delete Account
                            </template>

                            <template #content>
                                    Dialog modal içerik alanı
                            </template>

                            <template #footer>
                                <SecondaryButton @click="closeModal">
                                    kapat
                                </SecondaryButton>
                             </template>

               </DialogModal>

gayet düzgün çalışıyor . anlamaya/öğrenmeye çalıştığım
Dialogmodal içinden bir üstteki componentteki Dashboard vue da bulunan fonksiyonlara nasıl ulaşabiliyo ? mesela
<SecondaryButton @click="closeModal"> bu DialogModal içinde ama fonksiyon Dashboard.vue içinde .. ?
Bu basit bi örnek daha detaytlısı
DeleteUSerForm içinde bulunan


const form = useForm({
    password: '',
});

bu alanı Dialogmodal içindeki input ulaşarak kullanabiliyor

mgsmus

isset DialogModal Dashboard.vue içindeki template içinde değil mi? Direkt ulaşabildiği yerde zaten. SecondaryButton yaptığı özel bir şey yok. Asıl DialogModal.vue içinden Dashboard.vue içinde bir şey yapıyorsa, yani child, parent üzerinde bir şey değiştiriyorsa o zaman emit kullanıyordur:
https://vuejs.org/guide/components/events.html

Mesela <DialogModal @close="closeModal"> kısmına bakarsanız, demek ki DialogModal.vue içinde emit('close') yapan bir yer var. Bu da Dashboard.vue içindeki closeModal yöntemini tetikliyor.

Örneğin:

Parent.vue

<script setup>
import Child from 'Child.vue'

function parentMethod() {
    console.log('parentMethod() called from a child...')
}
</script>
<template>
    <div>
        <Child @childEvent="parentMethod" />
    </div>
</template>

Child.vue

<script setup>
const emit = defineEmits([
    'childEvent'
])

function dispatchChildEvent() {
    emit('childEvent')
}
</script>
<template>
    <div>
        <button @click="dispatchChildEvent">Dispatch</button>
    </div>
</template>

Dispatch düğmesine tıkladığınızda konsolda parentMethod() called from a child... yazar.

Buna göre, Child içine de aynı mantıkla bir Child eklerseniz ve o da kendi parent'indeki dispatchChildEvent yöntemini ateşleyen bir event ateşlerse, bizim asıl Parent.vue dosyasına göre en alttaki child değil grandchild yani torun olacağından bu sefer torundan Parent içindeki bir yöntemi ateşlemiş olursunuz. Yani Parent <- Child <- GrandChild yapmış olursunuz. Bu tür iç içe ilerleme bazen ortalığı karıştırabileceği için böyle local event'lar yerine bazen global olanlar gerekebilir. Onun için şunu kullanabilirsiniz:
https://github.com/developit/mitt

isset

çOK TEŞEKKÜRLER Aradığım şey Emits diye bişiymiş

mgsmus Parent <- Child <- GrandChild yapmış olursunuz. Bu tür iç içe ilerleme bazen ortalığı karıştırabileceği için

yok bukadar ilerlemedimn daha . tekrar teşekkür ederim