Setelah kemarin kita sudah berhasil menampilkan sebuah data array dalam sebuah component, sekarang kita akan coba yang lainnya yaitu tentang Cara Membuat Event di Component VueJS, jadi ada yang berbeda ketika kita menggunakan event template component dengan tidak, caranya seperti apa simak terus ya teman-teman.
Cara Membuat Event di Component VueJS, caranya sedikit berbeda ketika kita menggunakan sebuah component dimana, biasanya ketika kita tidak menggunakan component kita akan buat juga methodnya, tetapi untuk kasus kali ini saya tidak akan menggunakan methods karena untuk artikel ini saya akan mencoba dimana ketika saya mengklik buttonnya huruf akan berubah font sizenya, akan saya berikan sentuhan CSS sedikit untuk melihat hasil eventnya, ketika kita klik akan terus bertambah, sedikit menarik bukan.
Seperti biasa saya akan menggunakan sebuah CDN bootstrap dan VueJSnya, jadi saya rasa teman-teman harus sudah terkoneksi internet ya, dan disini saya juga harus menggunakan bantuan emit, oke langsung saja silahkan teman-teman lihat disini template di HTMLnya hanya seperti ini:
|
1 2 3 4 5 |
<div id="contoh-membuat-event-dicomponent"> <div :style="{ fontSize: ukuranSize + 'em' }"> <span style="color: #ff0000"><contoh-tag v-on:besarkan-teks="ukuranSize += 0.1"></contoh-tag></span> </div> </div> |
contoh-tag itu adalah hasil tag yang kita buat di component seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Vue.component('contoh-tag', { template: ` <div class="card" style="width: 18rem;"> <img src="gambar-dumet.png" class="card-img-top img-fluid" alt="..."> <div class="card-body"> <h3 class="card-title text-center">Cara Membuat Event di Component VueJS</h3> <hr> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary" v-on:click="$emit('besarkan-teks')">Click Untuk Perbesar</a> </div> </div> ` }) |
disini saya membuat component dengan contoh-tag lalu untuk templatenya saya buat dengan card yang ada di bootstrap supaya terlihat cantik dan rapi dan jangan lupa new Vuenya di buat ya, seperti ini:
|
1 2 3 4 5 6 |
new Vue({ el: '#contoh-membuat-event-dicomponent', data: { ukuranSize: 1 } }) |
Jika sudah teman-teman akan mendapatkan hasil seperti ini:
jika teman-teman coba klik buttonya tulisan “some quick …” akan berubah font sizenya silahkan coba sendiri, dan itu lah Cara Membuat Event di Component VueJS, bagaimana cukup menarik ya, dan saya rasa cukup sampai disini belajar kita tentang Cara Membuat Event di Component VueJS semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.