Phenquestions
Vue.js, büyük web uygulamaları oluşturmak için çok yönlü ve tam teşekküllü bir çerçevedir. Herhangi bir web uygulaması Bileşenlere bölünmüştür. Örneğin, bir başlık, kenar çubuğu ve diğer bazı bileşenleri içeren basit bir web sitesi. Bu bileşen tabanlı yaklaşımı yönetmek ve ele almak için Vue.js, bileşenler arasındaki ebeveyn-çocuk ilişkisini sunar ve eğer bileşenler arasında bazı veriler göndermek istiyorsak. Vue.js, ebeveynden bir alt bileşene veri göndermek için, ancak çocuktan ebeveyne veri göndermek için aksesuarlar sunar; özel olaylar yaymalıyız. Bu makalede, özel etkinlikleri başlatma ve dinleme hakkında bilgi edineceğiz.Her şeyden önce, Vue'da özel bir etkinliğin nasıl başlatılacağını görelim.js ve sonra bu olayı nasıl dinleyeceğinizi. Vue'da bir olayı başlatmak için sözdizimi.js
bu.$emit('olayAdı')Bu söz diziminde olaya isim verirken dikkatli olmamız gerekiyor çünkü aynı isim kullanılıyor; bu olayı daha sonra dinleyeceğiz. Bu olayı dinleyebilmek için Vue'da bir click olayını dinlerken dinleyebiliriz.js. Örneğin
Herhangi bir ifadeyi ters virgüllere ve bir fonksiyona yazabiliriz. Öyleyse daha iyi anlamak için bir örnek deneyelim.
Misal
İçinde props kullanarak bir mesaj ilettiğimiz “childComponent” adında bir alt bileşen içeren “parentComponent” adında bir Bileşenimiz olduğunu varsayalım.
Ana Bileşen
Alt Bileşen
Alt Bileşende, sahne alıyoruz ve mesajı 'p' etiketinde gösteriyoruz.
mesaj
Şimdi bu iki bileşeni kurduktan sonra. ParentComponent'imize tekrar merhaba diyelim. Merhaba demek için önce bir buton oluşturacağız ve o butona tıklandığında “helloBack” fonksiyonunu çağıracağız. Düğmeyi oluşturduktan sonra, alt bileşenin HTML'si şu şekilde olur
İleti
Method nesnesinde de “helloBackFunc” fonksiyonunu oluşturalım. "HelloBackEvent" ile birlikte "Hello Parent" dizesini içeren bir "helloBackVar" değişkenini yayacağız. Bir fonksiyon oluşturduktan sonra, alt bileşenin javascript'i şu şekilde olacaktır
Olayı ateşlemekle işimiz bitti. Şimdi olayı dinlemek için ana bileşene geçelim.
Ana bileşende, tıklama olayını dinlediğimiz gibi olayı basitçe dinleyebiliriz. Sadece ChildComponent'in etiketindeki olayı dinleyeceğiz ve üzerindeki “thanks()” fonksiyonunu çağıracağız.
Teşekkürler fonksiyonunda, iletilen dizeyi “thanksMessage” adlı değişkene atayacağız. Fonksiyonu oluşturduktan ve iletilen dizeyi değişkene atadıktan sonra, “parentComponent”in javascript'i şu şekilde olacaktır
Ve çalışıp çalışmadığını görmek için şablondaki "thanksMessage" değişkenini bir yere bağlayın.
Ana Bileşen
teşekkür mesajı
Alt Bileşen
Tüm bu kodu oluşturup yazdıktan sonra, en son işlevleri almak için web sayfasına gidin ve yeniden yükleyin.
Propların alt bileşene başarılı bir şekilde aktarıldığını görebiliriz. Şimdi, aslında alt bileşende bulunan butona tıklarsak. Teşekkür mesajı, ana Bileşen Başlığından hemen sonra görüntülenmelidir.
Gördüğünüz gibi, görüntülenir.
Böylece, özel olayları bu şekilde yayınlayabilir veya tetikleyebilir ve onları Vue'daki başka bir bileşende dinleyebiliriz.js.
Özet
Bu makalede, Vue'da özel olaylar yaymayı öğrendik.js. Bu makale, kısa bir açıklama ile birlikte anlamak için adım adım uygun bir örnek içermektedir. Bu nedenle, bu makalenin Vue'da özel olaylar yayma konusunda daha iyi ve net kavramlara sahip olmanıza yardımcı olacağını umuyoruz.js. Daha fazla böyle faydalı içerik için linuxhint'i ziyaret etmeye devam edin.com
