{"id":1516,"date":"2023-02-09T18:39:34","date_gmt":"2023-02-09T11:39:34","guid":{"rendered":"https:\/\/duniacoding.info\/?p=1516"},"modified":"2023-02-10T11:16:27","modified_gmt":"2023-02-10T04:16:27","slug":"belajar-vue-js-emit-pada-vue-js","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/belajar-vue-js-emit-pada-vue-js\/","title":{"rendered":"Belajar Vue Js #7 : Emit pada Vue Js"},"content":{"rendered":"\n
\"emit-pada-vue-js\"<\/figure>\n\n\n\n

Nah, di kesempatan kali ini kita akan belajar menggunakan Emit pada Vue Js. Tapi, Apasih Emit itu?<\/p>\n\n\n\n

Di Artikel sebelumnya kita sudah mengenal yang namanya Components. Components ini memisahkan section-section dari website menjadi bagian-bagian kecil yang bisa digunakan secara berulang kembali pada halaman website yang lain. Tapi, bagaimana cara kita buat komunikasi antar Components? Nah disitulah Emit berjaya.<\/p>\n\n\n\n

Penjelasan Emit pada Vue Js<\/h2>\n\n\n\n

Saat penjelasan Component kemarin kita sudah belajar sedikit mengenai Props <\/em>kan, nah Emit ($emit) ini konsepnya hampir sama seperti Props. <\/em>Akan tetapi ada sedikit perbedaan antara Props <\/em>dan Emit<\/p>\n\n\n\n

Props hanya dapat passing data dari komponen parent ke child.<\/p>\n\n\n\n

Sedangkan, Emit dapat melakukan costum event, yaitu pertukaran data dari komponen child ke komponent parent. Jadi kita bisa menjalankan Event pada Parent dengan cara men-trigger Event pada Child Component<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Bayangkan kita memiliki Component Tombol (Button), lalu apabila tombol itu di Klik, angka pada Parent akan bertambah. Bagaimana kita memastikan hal itu terjadi? Nah Disitu lah Emit bekerja, dia memastikan apabila kita Klik tombol pada Component, tetap akan terjadi perubahan pada halaman utama.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Penulisan Emit pada Vue Js<\/h2>\n\n\n\n

Emit pada Vue js ini sudah pasti dituliskan pada Component, akan tetapi ada beberapa aturan agar Emit ini bisa berjalan, dan bahkan sampai bisa mengirim data dari Child ke Parent nya. Jadi Emit tidak hanya mengirim Event, tapi bisa juga mengirim Data. <\/p>\n\n\n\n

Pada Child Component Emit biasanya ditulis seperti ini <\/p>\n\n\n\n

this.$emit('EmitName', [data])<\/code><\/pre>\n\n\n\n
Seperti yang teman-teman lihat, Emit bisa mengirim 2 Hal, yang pertama adalah Custom Event dengan nama EmitName<\/em>, lalu bisa juga mengirim Data. <\/p>\n\n\n\n
Pada Parent Component akan dipanggil seperti ini<\/p>\n\n\n\n
<Button @EmitName=\"ParentEvent\" \/><\/code><\/pre>\n\n\n\n
Jadi pada Parent Component kita berikan @EmitName<\/em> sesuai dengan nama Custom Event kita, lalu kita berikan ParentEvent<\/em> atau Event yang akan dijalankan apabila Emit ini ter-trigger. Apabila kita mengirim data dari Emit, kita bisa tambahkan $event pada parameter ParentEvent untuk dibaca<\/p>\n\n\n\n
<Button @EmitName=\"ParentEvent($event)\" \/><\/code><\/pre>\n\n\n\n
Ada beberapa tambahan lagi dari Emit, detail nya bisa dibaca pada dokumentasi resmi Vue Js Emit pada Vue Js<\/a>.<\/p>\n\n\n\n
Kesimpulan<\/h2>\n\n\n\n
Emit ini merupakan hal yang akan sering kita gunakan saat melakukan development dengan Vue Js. Oleh karena itu kita harus memahami Emit ini dengan baik. <\/p>\n\n\n\n
Untuk Artikel lain bisa kalian lihat disini<\/p>\n\n\n\n
    \n
  1. Belajar Vue Js #6 : Component pada Vue Js<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Nah, di kesempatan kali ini kita akan belajar menggunakan Emit pada Vue Js. Tapi, Apasih Emit itu? Di Artikel sebelumnya kita sudah mengenal yang namanya Components. Components ini memisahkan section-section dari...<\/p>\n","protected":false},"author":2,"featured_media":1279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[203,49,190,189],"class_list":["post-1516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-emit","tag-tutorial","tag-tutorial-vue-js","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=1516"}],"version-history":[{"count":2,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1516\/revisions"}],"predecessor-version":[{"id":1520,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1516\/revisions\/1520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/1279"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=1516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=1516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=1516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}