Vue Bileşenleri Arasında İletişim Kurmak İçin Olayları Yayma

Web uygulamalarınızı bir bileşen mimarisi kullanarak yapılandırmak, uygulamanızı oluşturmayı ve sürdürmeyi kolaylaştırır.

Özel olaylar yayınlamak, bileşenler arasındaki iletişimi yönetmenin bir yoludur; sahne donanımı ve yuvalar diğer ikisidir. Özel etkinlikler, alt bileşenden üst bileşene veri göndermenizi sağlar.

Olayları Bir Çocuktan Ebeveynine Yaymak

Vue, bileşenler arasında iletişim kurmak için birçok seçenek sunar. önemli bir yolu bileşenler arasındaki iletişim sahne donanımı aracılığıyla yapılır. Destekler, ebeveynden alt bileşenlere veri göndermenize olanak tanır.

Alt bileşenden üst bileşene veri göndermek isterseniz ne olur? Vue, alt bileşenlerden üst bileşenlere özel olaylar yaymanıza izin verir. Bu işlem, üst bileşenin alt bileşenden veri ve işlevleri kullanmasını sağlar.

Örneğin, her tıklamada bir değer döndüren bir işleve sahip bir düğme bileşeni hayal edin. Ana bileşenin durumunu güncellemesini veya döndürülen değere göre bir eylem gerçekleştirmesini sağlamak için bu olayı üst bileşene yaymanız gerekir.

Vue'da Özel Yayılan Olaylar için Adlandırma Kuralı

Özel etkinliklerin nasıl yayınlanacağı konusuna dalmadan önce, Vue'daki özel etkinlikler için adlandırma kuralını anlamanız gerekir. Vue 3 ortaya çıkmadan önce, geliştiriciler kesinlikle özel olayları tanımlamak zorundaydı. kebap kutusu, adlardaki sözcükleri tire karakteriyle ayırarak.

HTML şablonlarıyla çalışırken özel etkinliklerinizi kebab-case'de tanımlamak artık standart bir uygulamadır ve deveKılıf JavaScript ile çalışırken. Ancak, Vue tüm özel olayları kebab-case'e geri derlediğinden, JavaScript ile çalışırken herhangi bir seçeneği kullanmayı seçebilirsiniz.

Özel bir etkinlik yayınladığınızda, etkinliğin amacını açıklayıcı bir adla iletin. Bu, özellikle bir takımda çalışırken etkinliğin amacını netleştirmek için çok önemlidir.

Alt Bileşenden Üst Bileşene Özel Olaylar Nasıl Yayınlanır?

Vue'da özel olayları yaymayı başarmanın iki yolu vardır. ile satır içi (doğrudan Vue şablonunda) özel olayları yayınlayabilirsiniz. $emit Vue'nun sağladığı yöntem. Ayrıca, defineEmits makro Vue 3'ten edinilebilir.

$emit Yöntemiyle Vue'da Özel Olaylar Yayınlama

$emityerleşik bir Vue yöntemi, bir alt bileşenin üst bileşenine bir olay göndermesine olanak tanır. Özel olayı tetiklemek için bu yöntemi satır içi (alt bileşenin şablonu içinde) çağırırsınız. $emit yöntemi iki bağımsız değişken alır: yaymak istediğiniz olayın adı ve ek veri taşıyabilen isteğe bağlı bir yük.

Ana bileşene bir düğme tıklaması hakkında bildirimde bulunmak için bir olay yayınlayan bu alt bileşeni göz önünde bulundurun:

 ChildComponent.vue 
<senaryokurmak>
{ ref } öğesini 'vue'dan içe aktarın;
sabit gönderi = ref('')
senaryo>
<şablon>
<div>
<giriştip="metin"v modeli="postalamak">
<düğmev-açık: tıklayın="$emit('düğme tıklandı', gönderi)">Postalamakdüğme>
div>
şablon>

Bu kod bloğu, bir alt bileşenden özel bir olayın nasıl yayılacağını gösterir. Çocuk, boş bir dizeyle bir gönderi değişkeni başlatarak başlar.

Alt bileşen daha sonra giriş öğesini v-model ile post değişkenine bağlar, a Vue veri bağlama yönergesi. Bu bağlama, giriş değişkenini otomatik olarak güncellemek için giriş alanında yaptığınız değişikliklere izin verir.

button öğesi, düğmedeki tıklama olaylarını dinleyen bir v-on yönergesine sahiptir. Düğme tıklaması $emit yöntemini iki bağımsız değişkenle çağırır: olay adı, "düğme tıklandı" ve gönderi değişkeninin değeri.

Ana bileşen artık özel olayı v-on yönergesiyle dinleyebilir. Vue'da olayları işleme:

 Ebeveyn Bileşeni.vue 
"vue"dan { ref } içe aktar;
ChildComponent'i "./components/ChildComponent.vue" dosyasından içe aktarın;
const postList = ref([])
const addPosts = (yazı) => {
 postList.value.push (yayın)
}
senaryo>
<şablon>
<div>
<Alt Bileşen @düğme tıklandı="Yayın ekle"/>
<Ul>
<liv-için="postList'te yayınla">{{ postalamak }}li>
Ul>
div>
şablon>

Bu kod bloğu, daha önce alt bileşeni içe aktaran ve kullanan bir üst bileşeni gösterir. Üst bileşen bir tanımlar gönderiListesi reaktif referans olarak dizi değişkeni. Bileşen daha sonra bir tanımlar gönderileri ekle çalışan fonksiyon, bir postalamak argüman. İşlev, postList dizisine şununla yeni bir gönderi ekler: itmek() yöntem.

bu @düğmesine tıklandı olay dinleyicisi özel olayı yakalar Alt Bileşen düğmeyi tıklattığınızda yayar. Bu olay, addPosts işlevinin çalışmasına neden olur. Son olarak, kod bloğu ekler v-için yönergesi Vue'da liste oluşturma postList dizisi üzerinde yineleme yapmak için ul öğesine.

defineEmits Makrosu ile Yayılan Olaylar

Vue 3 tanıttı defineEmits bir bileşenin yayabileceği olayları açıkça tanımlayan makro. Bu makro, daha yapılandırılmış bir kod tabanına yol açan olayları yaymak için tür açısından güvenli bir yol sağlar.

İşte defineEmits makrosunu nasıl kullanabileceğinize ve onu alt bileşeninizde nasıl çağırabileceğinize bir örnek:

 ChildComponent.vue 
<senaryokurmak>
"vue"dan { ref } içe aktar;
const emit = defineEmits(["düğmeye tıklandı"]);
sabit yazı = ref("");
const butonuClick = () => {
 emit("düğme tıklandı", post.value);
};
senaryo>
<şablon>
<div>
<giriştip="metin"v modeli="postalamak" />
<düğmev-açık: tıklayın="düğmeye tıklayın">Postalamakdüğme>
div>
şablon>

İşlevsellik aynı kalırken, yukarıdaki kod bloğu ile aşağıdaki kod bloğu arasında kod söz diziminde önemli farklılıklar vardır: $emit işlev.

Bu kod bloğunda, defineEmits makro tanımlar düğme tıklandı etkinlik. Bu makroyu çağırarak kod bloğu, tanımlanan olayları yaymanıza izin veren bir $emit işlevi döndürür. Bileşen içindeki defineEmits makrosuna iletilen dizi, üst bileşene yaymanız gereken tüm olayları içerecektir.

Ardından, kod bloğu bir düğmeTıklayın işlev. Bu işlev, düğmeye tıklanan olayı ve post değişkenini üst bileşene yayar. Alt bileşenin şablon bloğu bir düğme elemanı barındırır.

Düğme elemanının bir v-açık: tıklayın buttonClick işlevini tetikleyen yönerge. Ana bileşen daha sonra alt bileşeni, $emit yönteminde yaptığı gibi kullanabilir.

Vue Geliştiricileri, Bileşen Tabanlı Bir Mimariden Faydalanıyor

$emit yöntemini ve defineEmits makrosunu kullanarak olayları yayarak bir alt bileşenden üst bileşene iletişim kurabilirsiniz.

Daha yapılandırılmış, özlü kod yazmanıza izin verdiği için Vue'nun bileşen tabanlı mimarisinden yararlanabilirsiniz. Vue gibi modern JavaScript çerçeveleriyle, bu bileşen tabanlı mimariyi elde etmek için bir W3C web standardı olan Web Components'ı kullanabilirsiniz.