Untuk mengirim data di dari component 1 ke component lain itu tidak sembarang jika kita menggunakan vuejs, jadi kedepannya component A dan component B biasanya berada di file yang berbeda, jadi ada sebuah trik dimana kita ingin component itu saling terintegrasi satu sama lain, oke jangan kemana-mana disini kita akan belajar cara mengirim data dengan Bus di Vuejs, simak terus ya.
Disini saya mau ketika saya menginputkan sesuatu di component A maka component B akan Mendapatkan hasilnya, seperti judulnya cara mengirim data dengan Bus di Vuejs, kita bisa menggunakan sebuah bus. bus ini hampir sama seperti emit, cuma perbedaanya, ketika kita menggunakan sebuah bus kita tidak perlu lagi membuat sebuah attribute seperti emit, kita tinggal menembakan sebuah busnya lau di terima dengan bus.$on seperti itu kurang lebih, oke kita sekarang kita lihat cara menggunakannya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="row" id="app"> <div class="col-md-4 offset-md-4" > <div class="alert alert-primary" role="alert"> {{ pesan }} </div> <hr> <design1 @to_data_utama="pesan=arguments[0]"></design1> <hr> <design2></design2> </div> </div> </div> |
Disini saya menggunakan sebuah bootstrap bisa dilihat karena disini saya menggunakan sebuah component, jadi output dari sebuah templatenya hanya segitu, karena kita menempatkan tagnya di template.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Vue.component('design1',{ template: ` <div> <h3>Component 1</h3> <input class="form-control" v-model="pesan"> <button class="btn btn-xs btn-primary mt-2" @click.prevent="send">Send</button> </div> `, data(){ return{ pesan: "data dari komponen satu" } }, methods:{ send(){ this.$emit('to_data_utama', this.pesan) bus.$emit('to_comp2',this.pesan) } } }) |
di atas adalah compoent 1, dan yang bawah component 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Vue.component('design2',{ template: ` <div> <h3>Component 2</h3> <span class="text-danger">{{ pesan2 }}</span> </div> `, data(){ return{ pesan2: "Menunggu dari data 1" } }, created(){ var that = this bus.$on('to_comp2', function(v){ that.pesan2 = v }) } }) |
dan ini adalah data utamanya
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data: { pesan: 'hallo dumet school' } }) |
oke jadi ketika teman-teman sudah melihat kode di atas, disini saya menampilkan data setiap masing-masing data. bisa lihat disini
Data default itu di tampilkan dari kepunyaan pesan masing-masing, oke nama diatas dan component akan kita rubah dengan sesuai dengan value yang ada di inputan component 1, kita lihat ya
Oke bisa dilihat ketika saya memasukan sebuah data dan ketika saya mengklik send, maka component satu dan judul tulisannya ikut berubah, oke menarik ya belajar cara mengirim data dengan Bus di Vuejs, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.