Component adalah salah satu fitur yang powerful dari Vue.js, bayangkan anda dapat membuat sebuah component yang berisi elemen HTML yang dapat digunakan kembali (reusable) tanpa perlu menuliskan kembali elemen tersebut. Hal ini tentu saja dapat membantu anda mempercepat proses development, selain itu anda juga dimudahkan dalam me-mantainance code yang telah anda tulis .
Membuat Component
Kita akan memulai dengan component sederhana, agar bisa menggunakan sebuah component maka yang pertama yang harus kita lakukan adalah register component. Salah satu cara untuk melakukann register component adalah dengan menggunakan method Vue.component
Vue.component('nama_component', {
//option
});
Berikut contoh sederhana dengan membuat sebuah component yang berisi template tag h1:
<!DOCTYPE html>
<html>
<head>
<title>Computed Properties - Daengweb</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="dw" class="container">
<dw-paragraf></dw-paragraf>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('dw-paragraf', {
template: '<h1>Membuat component</h1>'
});
new Vue({
el: '#dw',
});
</script>
</body>
</html>
Sekarang kita sudah memiliki sebuah component dengan nama dw-paragraf, dan component dengan custom elemen ini bisa kita tempatkan dimanapun layaknya sebuah tag HTML. Karena sifatnya reusable, maka dw-paragraf dapat kita gunakan sesuai keinginan.
Custom Templates
Selain menggunakan cara diatas dalam membuat sebuah custom elemen, terdapat cara lain dalam membuat template untuk component kita. Cara lain tersebut adalah dengan membuat sebuah tag script dengan type text/template dan id dw-paragraf
<div id="dw" class="container">
<dw-paragraf></dw-paragraf>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/template" id="dw-paragraf">
<h1>Membuat template</h1>
</script>
<script type="text/javascript">
Vue.component('dw-paragraf', {
template: '#dw-paragraf'
});
new Vue({
el: '#dw',
});
</script>
Adapun versi lainnya sekaligus banyak digunakan adalah dengan membuat tag template disertai id yang akan menjadi selector.
<div id="dw" class="container">
<dw-paragraf></dw-paragraf>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
<h1>Membuat template Vue.js</h1>
</template>
<script type="text/javascript">
Vue.component('dw-paragraf', {
template: '#dw-paragraf'
});
new Vue({
el: '#dw',
});
</script>
Menambahkan Properties
Kurang menarik bukan jika isi dari template yang akan ditampilkan itu-itu saja, maka kita memiliki properties lain yang dapat digunakan untuk membuat content yang dimiliki bersifat lebih dinamis, yakni dengan menggunakan props.
<div id="dw" class="container">
<dw-paragraf isi="saya belajar Vue.js"></dw-paragraf>
<dw-paragraf isi="saya belajar Laravel"></dw-paragraf>
<dw-paragraf isi="saya belajar bersama Daengweb.id"></dw-paragraf>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
<h1>{{ isi }}</h1>
</template>
<script type="text/javascript">
Vue.component('dw-paragraf', {
props: ['isi'],
template: '#dw-paragraf'
});
new Vue({
el: '#dw',
});
</script>
Selain itu, kita dapat meng-explore lebih jauh lagi tentang penggunaan properties ini, misalnya dengan menambahkan object untuk menampilkan lebih dari satu data.
<div id="dw" class="container">
<dw-paragraf v-bind:dw="{isi: 'Belajar vue.js', jam: '10.00'}"></dw-paragraf>
<dw-paragraf v-bind:dw="{isi: 'Belajar Laravel', jam: '12.30'}"></dw-paragraf>
<dw-paragraf v-bind:dw="{isi: 'Belajar HTML', jam: '18.00'}"></dw-paragraf>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
<h1>{{ dw.isi }} pada jam {{ dw.jam }}</h1>
</template>
<script type="text/javascript">
Vue.component('dw-paragraf', {
props: ['dw'],
template: '#dw-paragraf'
});
new Vue({
el: '#dw',
});
</script>
Component Reusable
Pemrograman adalah tentang berimajinasi, maka mari kita berimajinasi sejenak. Seandainya terdapat perubahan variable dari jam menjadi waktu pada sisi backend, maka cara diatas dalam menampilkan list tidaklah efektif karena kita menuliskan custom elemen tersebut secara berulang. Maka untuk memecahkan masalah tersebut, kita dapat menggunakan v-for untuk melakukan perulangan. Sehingga apabila terjadi perubahan variable, kita cukup mengganti pada bagian template saja.
<div id="dw" class="container">
<h1>Jadwal Senin</h1>
<ul>
<dw-paragraf v-for="dw in jadwal" v-bind:dw="dw"></dw-paragraf>
</ul>
<h1>Jadwal Selasa</h1>
<ul>
<dw-paragraf v-for="dw in jadwal" v-bind:dw="dw"></dw-paragraf>
</ul>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
<li>{{ dw.isi }} pada jam {{ dw.jam }}</li>
</template>
<script type="text/javascript">
Vue.component('dw-paragraf', {
props: ['dw'],
template: '#dw-paragraf'
});
new Vue({
el: '#dw',
data: {
jadwal: [
{
isi: 'belajar vue.js', jam: '10.00'
},
{
isi: 'belajar Laravel', jam: '12.00'
},
{
isi: 'belajar HTML', jam: '18.00'
}
]
}
});
</script>
Sekarang coba anda ganti variable datanya dari jam menjadi waktu, dan untuk mengubah seluruh custom elemen tersebut anda cukup melakukan perubahan pada template anda.
<template id="dw-paragraf">
<li>{{ dw.isi }} pada jam {{ dw.waktu }}</li>
</template>
Cukup sampai disini untuk materi tentang component, silahkan explore lebih jauh lagi dalam berimajinasi menggunakan component. See next time.
Comments