Cara Memancarkan Acara untuk Berkomunikasi Antar Komponen Vue
Table of content:
Menyusun aplikasi web Anda menggunakan arsitektur komponen memudahkan pembuatan dan pemeliharaan aplikasi Anda.
Memancarkan peristiwa khusus adalah salah satu cara Anda dapat menangani komunikasi antar komponen; alat peraga dan slot adalah dua lainnya. Peristiwa khusus memungkinkan Anda mengirim data dari komponen anak ke komponen induk.
Baca Juga:
Pancarkan Acara Dari Anak ke Induknya
Vue menawarkan banyak opsi untuk berkomunikasi antar komponen. Salah satu cara komunikasi yang signifikan antar komponen adalah melalui alat peraga. Props memungkinkan Anda mengirim data dari komponen induk ke anak.
Lalu apa yang terjadi jika Anda ingin mengirimkan data dari komponen anak ke komponen induk? Vue memungkinkan Anda untuk memancarkan acara khusus dari komponen anak ke komponen induk. Proses ini memungkinkan komponen induk untuk menggunakan data dan fungsi dari komponen anak.
Misalnya, bayangkan komponen tombol dengan fungsi yang mengembalikan nilai pada setiap klik. Anda harus memancarkan peristiwa itu ke komponen induk untuk mengaktifkan komponen induk memperbarui statusnya atau melakukan tindakan berdasarkan nilai yang dikembalikan.
Konvensi Penamaan untuk Acara yang Dipancarkan Khusus di Vue
Sebelum mendalami cara memunculkan custom event, Anda perlu memahami konvensi penamaan untuk custom event di Vue. Sebelum Vue 3 muncul, pengembang harus secara ketat mendefinisikan acara khusus dengan kotak kebabmemisahkan kata dalam nama dengan karakter tanda hubung.
Sekarang sudah menjadi praktik standar untuk menentukan acara khusus Anda dalam wadah kebab saat bekerja dengan template HTML, dan camelCase saat bekerja dengan JavaScript. Namun, Anda dapat memilih untuk menggunakan opsi apa pun saat bekerja dengan JavaScript, karena Vue mengkompilasi semua peristiwa kustom kembali ke kebab-case.
Saat Anda memancarkan peristiwa khusus, sampaikan tujuan peristiwa dengan nama deskriptif. Ini sangat penting, terutama saat Anda bekerja dalam tim, untuk memperjelas tujuan acara.
Cara Memancarkan Acara Khusus Dari Komponen Anak ke Orang Tua
Ada dua cara yang bisa Anda lakukan untuk memancarkan acara khusus di Vue. Anda dapat membuat acara kustom sebaris (langsung di template Vue) dengan $memancarkan metode yang Vue sediakan. Anda juga dapat menggunakan defineEmits makro tersedia dari Vue 3.
Memancarkan Acara Kustom di Vue Dengan Metode $emit
$memancarkan, sebuah metode Vue bawaan, memungkinkan komponen turunan untuk mengirim peristiwa ke komponen induknya. Anda memanggil metode ini sebaris (di dalam templat komponen anak) untuk memicu peristiwa khusus. Metode $emit membutuhkan dua argumen: nama acara yang ingin Anda pancarkan dan payload opsional yang dapat membawa data tambahan.
Pertimbangkan komponen anak ini yang mengeluarkan peristiwa untuk memberi tahu komponen induk tentang klik tombol:
<script setup>
import { ref } from 'vue';const post = ref('')
</script>
<template>
<div>
<input type="text" v-model="post">
<button v-on:click="$emit('button-clicked', post)">Post</button>
</div>
</template>
Blok kode ini menunjukkan cara memancarkan peristiwa khusus dari komponen anak. Anak mulai dengan menginisialisasi variabel posting dengan string kosong.
Komponen anak kemudian mengikat elemen input ke variabel post dengan v-model, sebuah direktif data binding Vue. Pengikatan ini memungkinkan perubahan yang Anda lakukan pada bidang input untuk memperbarui variabel posting secara otomatis.
Elemen tombol memiliki direktif v-on yang mendengarkan kejadian klik pada tombol. Klik tombol memanggil metode $emit dengan dua argumen: nama peristiwa, “tombol-klik”, dan nilai variabel posting.
Komponen induk sekarang dapat mendengarkan event khusus dengan direktif v-on untuk menangani event di Vue:
import { ref } from "vue";
import ChildComponent from "./components/ChildComponent.vue";const postList = ref([])
const addPosts = (post) => {
postList.value.push(post)
}
</script>
<template>
<div>
<ChildComponent @button-clicked="addPosts"/>
<ul>
<li v-for="post in postList">{{ post }}</li>
</ul>
</div>
</template>
Blok kode ini menunjukkan komponen induk mengimpor dan menggunakan komponen anak dari sebelumnya. Komponen induk mendefinisikan a Daftarpos variabel array sebagai referensi reaktif. Komponen kemudian mendefinisikan sebuah addPosts fungsi yang berjalan, mengambil a pos argumen. Fungsi menambahkan posting baru ke array postList dengan dorongan() metode.
Itu @tombol-diklik pendengar acara menangkap acara khusus Komponen Anak memancarkan ketika Anda mengklik tombol. Peristiwa ini menyebabkan fungsi addPosts dijalankan. Akhirnya, blok kode menempel v-untuk direktif untuk merender daftar di Vue ke elemen ul untuk melakukan iterasi pada array postList.
Memancarkan Acara Dengan Macro defineEmits
Vue 3 memperkenalkan defineEmits makro, yang secara eksplisit mendefinisikan peristiwa yang dapat dipancarkan komponen. Makro ini menyediakan cara yang aman untuk memunculkan kejadian yang mengarah ke basis kode yang lebih terstruktur.
Berikut adalah contoh bagaimana Anda bisa menggunakan makro defineEmits dan memanggilnya di komponen anak Anda:
<script setup>
import { ref } from "vue";const emit = defineEmits(["button-clicked"]);
const post = ref("");
const buttonClick = () => {
emit("button-clicked", post.value);
};
</script>
<template>
<div>
<input type="text" v-model="post" />
<button v-on:click="buttonClick">Post</button>
</div>
</template>
Meskipun fungsinya tetap sama, ada perbedaan yang signifikan dalam sintaks kode antara blok kode di atas dan blok kode dengan $memancarkan fungsi.
Dalam blok kode ini, file defineEmits makro mendefinisikan diklik tombol peristiwa. Dengan memanggil makro ini, blok kode mengembalikan fungsi $emit, yang memungkinkan Anda memancarkan peristiwa yang ditentukan. Larik yang diteruskan ke makro defineEmits di dalam komponen akan berisi semua kejadian yang perlu Anda pancarkan ke komponen induk.
Selanjutnya, blok kode mendefinisikan a tombolKlik fungsi. Fungsi ini memancarkan peristiwa yang diklik tombol dan variabel posting ke komponen induk. Blok template komponen anak menampung elemen tombol.
Elemen tombol memiliki v-on: klik direktif yang memicu fungsi buttonClick. Komponen induk kemudian dapat menggunakan komponen anak dengan cara yang sama seperti pada metode $emit.
Pengembang Vue Memanfaatkan Arsitektur Berbasis Komponen
Anda dapat berkomunikasi dari komponen anak ke induknya dengan memancarkan peristiwa menggunakan metode $emit dan makro defineEmits.
Anda bisa mendapatkan keuntungan dari arsitektur berbasis komponen Vue karena memungkinkan Anda menulis kode yang lebih terstruktur dan ringkas. Dengan kerangka kerja JavaScript modern seperti Vue, Anda dapat menggunakan Komponen Web, standar web W3C, untuk mencapai arsitektur berbasis komponen ini.
Artikel Terkait
