Dalam VueJs, kita bisa memecah tampilan yang besar menjadi beberapa komponen kecil yang memiliki UI/tampilan dan fungsinya sendiri-sendiri.
Namun dengan memecah tampilan menjadi beberapa komponen akan muncul masalah bagaimana cara komunikasi antar komponen ini?
Oleh karena itu, pada tutorial ini kita akan membahas beberapa cara component bisa berkomunikasi dengan yang lainnya.
Komunikasi Parent ke Child
Untuk berkomunikasi dari parent component ke child component, kita bisa menggunakan props.
props memberikan kita jalan satu arah dari parent ke child. Tapi tidak bisa sebaliknya.
Untuk memberikan data ke child, parent bisa menambahkan argument di deklarasi child component.
<template>
<div>
<ChildComponent message="Hello" ></ChildComponent> <!-- props message dengan static content -->
<ChildComponent :message="msg" ></ChildComponent> <!-- props message dengan dynamic content -->
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data: function () {
return {
msg: 'Hello World!'
};
},
};
</script>Dari contoh di atas, di ChildComponent akan menerima sebuah props dengan nama message. Parent bisa memberikan data ke ChildComponent lewat props tersebut.
Lalu bagaimana cara ChildComponent menerima data dari parent?
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
message: String
},
data: function () {
return {
};
},
};
</script>
Nah dari kode diatas, dapat kita lihat bahwa untuk menangkap props dari parent, kita perlu membuat sebuah props object dengan field message dan tipe datanya String.
Kamu bisa pakai langsung props message untuk di render.
Jadi itulah cara memberikan data dari parent component ke child component dengan menggunakan props
Komunikasi Child ke Parent
Bagaimana caranya jika Child component ingin memberikan data ke parent?
Kita akan menggunakan this.$emit yang bisa gunakan untuk memanggil function di parent.
<template>
<div>
{{ message }}
<button @click="callParent" >Call</button>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
message: String
},
data: function () {
return {
};
},
methods: {
callParent(){
this.$emit('callFromChild');
}
}
};
</script>Kita sudah buat method callParent dimana saat dipanggil akan memanggil event callFromChild di parent component.
Bagaimana caranya?
Kita update dulu parent component.
<template>
<div>
<ChildComponent message="Hello" v-on:callFromChild="eventFromChild"></ChildComponent> <!-- pakai directive v-on: -->
<ChildComponent :message="msg" @callFromChild="eventFromChild" ></ChildComponent> <!-- atau pakai @ -->
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data: function () {
return {
msg: 'Hello World!'
};
},
methods: {
eventFromChild(){
alert('Call From Child.')
}
}
};
</script>Jadi untuk menangkan emit dari child, kita bisa menggunakan directive v-on:. Jadi bisa dituliskan v-on:nama-emit.
Contohnya seperti directive v-on:callFromChild akan memanggil method eventFromChild di parent.
Oh ya bagaimana caranya jika ingin memberikan variable/data dari child ke parent?
Caranya dengan menambahkan parementer saat emit.
this.$emit('callFromChild', param1, param2, param3);
Kemudian di parent component, untuk mengambil parameter yang dikirim adalah dengan menambahkan params di methodnya saja.
eventFromChild(param1, param2, param3){
alert('Call From Child.')
}Kamu sudah bisa memanggil event dan memberikan data dari child component ke parent component.
Komunikasi Antar Component
Untuk berkomunikasi antar component lain yang tidak memiliki hubungan parent & child, kita tidak bisa menggunakan props dan emit.
Solusinya adalah dengan menggunakan event-bus.
event-bus bisa dikatakan sebagai globa event yang bisa diakses di semua component.
Caranya adalah buat sebuah file dengan nama event-bus.js.
Isi dengan code dibawah ini:
import Vue from 'vue';
export const EventBus = new Vue();
Kamu tinggal import file event-bus.js disetiap component yang memakai event tersebut.
Misalnya kita pakai event-bus di child component.
<template>
<div>
{{ message }}
<button @click="callParent" >Call</button>
</div>
</template>
<script>
import { EventBus } from './event-bus'
export default {
name: 'ChildComponent',
props: {
message: String
},
data: function () {
return {
};
},
methods: {
callParent(){
EventBus.$emit('callFromChild');
}
}
};
</script>
Dan di parent component, untuk menangkap event tersebut caranya seperti di bawah ini.
<template>
<div>
<ChildComponent message="Hello" ></ChildComponent>
<ChildComponent :message="msg" ></ChildComponent>
</div>
</template>
<script>
import {EventBus} from './event-bus'
import ChildComponent from './ChildComponent'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data: function () {
return {
msg: 'Hello World!'
};
},
mounted: {
EventBus.$on('callFromChild', function(){
alert('Call From Child.')
})
}
};
</script>
Event Bus biasanya cukup digunakan jika skala aplikasi yang dibuat tidak terlalu besar. Jika kalian sedang membuat aplikasi yang cukup kompleks dan perlu komunikasi antar component maka lebih baik memakai vuex.
Kalau kalian ingin belajar tentang vuex, bisa baca artikel ini: Tutorial Vuejs : Kenalan dengan Vuex, Tutorial State Management di Vue Js
Jadi itulah beberapa cara komunikasi antar component di dalam Vue. Semoga artikel ini bisa bermanfaat ya. Yuk baca juga artikel Vue lainnya.
