$emit pada Vue.js
Jika kemarin kita belajar tentang props. yaitu suatu cara komunikasi atau passing data antara komponen. Bagi yang belum mengerti tentang props di harapkan membaca artikel di bawah ini.
Tutorial Props pada Vue.js
kali ini kita juga akan belajar $emit yang di sediakan oleh vue.js, kurang lebih sama konsepnya digunakan untuk pasing data antara komponen.
Hanya ada perbedaan mendasar dari props dan $emit adalah.
Props hanya dapat passing data dari komponen parent ke child.
Sedangkan, $emit dapat melakukan costum event, yaitu pertukaran data dari komponen child ke komponent parent.
Anda dapat perhatikan gambar di bawah ini untuk memahi cara kerja dari props dan $emit.
Penulisan
berikut ini penulisan $emit.
this.$emit('eventName', [argument])$emit digunakan sebagai trigger event untuk passing data dari komponen anak ke komponen parent.
contoh kode sebagai berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$emit</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
</head>
<body>
<div id="app">
<tombol @halo="hallo"></tombol>
</div>
<script>
Vue.component('tombol', {
// kita mendaftakan event 'halo' pada emit
// untuk di teruskan ke komponen parent
template: `
<button @click="$emit('halo')"">
clik saya untuk munculkan alert
</button>
`
})
new Vue({
el: '#app',
methods: {
hallo() {
alert('hallo world')
}
}
})
</script>
</body>
</html>Contoh Kode Penggunaan $emit
- Menampilkan alert. Contoh kode dibawah saya dapat dari internet. Sekarang kita akan membuat program dimana element button sebagai child memberikan informasi kepada parent untuk menampilkan alert ketika tombol diklik.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>belajar $emit</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="jumbotron text-center">
<h1>Belajar Vuejs</h1>
<p>ini adalah tutorial belajar tentang $emit</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<pesan-alert jenis-alert="info"
pesan="ini adalah alert warna biru"
@klik="munculkanPopup">
</pesan-alert>
</div>
<div class="col-md-6">
<pesan-alert jenis-alert="warning"
pesan="ini adalah alert warna kuning"
@klik="munculkanPopup">
</pesan-alert>
</div>
</div>
</div>
</div>
<script>
Vue.component('pesan-alert', {
props: ['jenisAlert', 'pesan'],
template: `
<div :class="classAlert" >
<button type="button"
class="close" @click="$emit('klik', pesan)">
×
</button>
{{ pesan }}
</div>
`,
computed: {
classAlert: function() {
return 'alert ' + 'alert-' + this.jenisAlert + ' alert-dismissible'
}
}
}) new Vue({
el: '#app',
methods: {
munculkanPopup(pesan) {
alert('halo ' + pesan)
}
}
})
</script>
</body>
</html>
output:
2. $emit dengan v-model. Contoh yang ini juga saya dapat dari salah satu artikel. Sumbernya saya lupa. Namun idenya adalah ketika button diklik, maka data pada komponen ‘input-name’ yang kita buat akan di passing ke komponen <h1>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>latihan $emit</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input-name v-on:klik="setName($event)"></input-name>
</div>
<h1>Hello, {{name}}</h1>
</div>
<script>
Vue.component('input-name', {
data: () => ({ name: 'World' }),
//saat anda klik tombol update, vue akan membuat $emit dengan event 'update'
// kemudian memberitahu parent untuk merubah data pada 'name'
template: `
<div>
<input type="text" v-model="name">
<button v-on:click="$emit('klik', name)">
Update
</button>
</div>
`
}) new Vue({
el: '#app',
data: () => ({ name: 'world' }),
methods: {
// mendefenisikan sebuah method. yang nantikan akan di handle oleh vue untuk perubahan data pada 'name'
setName: function(textUpdate) {
this.name = textUpdate;
}
}
})
</script>
</body>
</html>
output:
Passing Data Antar Komponen Sibling
$emit tidak hanya dapat melakukan passing data dari komponen child ke komponen parent. Namun juga dapat melakukan passing data antar komponen (sibling) dalam satu parent.
Sepertinya gambar di bawah ini akan memperjelas pemahaman mengenai penjabaran diatas.
berikut ini adalah contoh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>komunikasi dengan $emit</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet">
</head><body>
<div id="root">
<parentcomponent></parentcomponent>
</div>
</body><script>
Vue.component('componentSatu', {
props: ['dataText'],
template: `
<div class="jumbotron text-center">
<h1>kamu sudah klik {{ dataText }} kali</h1>
</div>
`
}) Vue.component('componentDua', {
data(){
return{
nclick: 0
}
},
template:`
<div class="alert alert-info text-center">
<button class="btn btn-secondary" @click="count">
Klik
</button>
<button class="btn btn-secondary" @click="reset">
Reset
</button>
</div>
`,
methods: {
count(){
this.nclick += 1 this.$emit('eventset', this.nclick)
},
reset(){
this.nclick = 0 this.$emit('eventset', this.nclick)
}
}
}) Vue.component('parentcomponent', {
data(){
return {
data: 0
}
},
template: `
<div class="container">
<component-satu :dataText="data"></component-satu>
<component-dua @eventset="set"></component-dua>
</div>
`,
methods: {
set(n){
this.data = n
}
}
}) new Vue({ el: '#root' }) </script>
</html>
outuput:
