Sebuah halaman HTML dapat tersusun dari banyak elemen. Tentunya, akan sangat tidak efektif jika kerangka HTML yang sama harus terus ditulis berulang kali. Seiring bertambahnya tingkat kompleksitas dan skala aplikasi web yang dibangun, pengorganisasian kode dibutuhkan agar kerangka HTML yang sama, cukup sekali ditulis, namun dapat digunakan berkali-kali. Untuk keperluan ini, Vue.js menyediakan fasilitas berupa component / komponen.

Pengelompokan kerangka HTML dalam komponen Vue tidak hanya membuat susunan kode terlihat rapih, tapi juga menjadikannya lebih mudah di-maintain. Jika sewaktu-waktu dibutuhkan perubahan kode, maka modifikasi cukup dilakukan di komponen terkait saja.

Kita mulai dari contoh komponen Vue yang paling sederhana, buat file latihan007.html, lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 007</title>
</head>
<body>
    <div id="app">
        <kota></kota>
    </div>
    <script src="vue.js"></script>
    <script src="latihan007.js"></script>
</body>
</html>

dan file latihan007.js dengan kode berikut :

Vue.component('kota', {
    template: `
        <li>Jogja</li>
    `
});

new Vue ({    
    el: '#app'
});

Catatan : mulai materi ini, seluruh contoh yang saya berikan berikutnya akan menggunakan file Javascript terpisah dari halaman HTML.

Pada kode di atas, saya membuat komponen di sisi Vue bernama 'kota'. Di dalam komponen tersebut, saya bebas mendefinisikan kerangka HTML apa saja melalui option template. Kerangka HTML <li>Jogja</li> akan di-render setiap kali elemen <kota></kota> disertakan ke dalam <div id="app"></div>. Hasilnya terlihat seperti gambar berikut :

dasar pembuatan komponen vue js

Pengisian konten Jogja di dalam kerangka HTML di atas masih dilakukan secara hard-coded / statis. Dengan sedikit perubahan, template komponen kota dapat diisi konten secara dinamis. Caranya? gunakan <slot></slot>.

Perbarui file latihan007.html dengan baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 007</title>
</head>
<body>
    <div id="app">
        <kota>Bandung</kota>
        <kota>Makassar</kota>
        <kota>Surabaya</kota>
    </div>
    <script src="vue.js"></script>
    <script src="latihan007.js"></script>
</body>
</html>

dan juga file latihan007.js, ganti baris <li>Jogja</li> menjadi <li><slot></slot></li> :

Vue.component('kota', {
    template: `
        <li>
            <slot></slot>
        </li>
    `
});

new Vue ({    
    el: '#app'
});

Penulisan komponen kota cukup dilakukan sekali saja, setelah itu komponen dapat terus digunakan berulang kali dan diisi konten berbeda-beda : <kota>Bandung</kota>, <kota>Makassar</kota>, <kota>Surabaya</kota>

Hasil akhir eksekusi file latihan007.html dapat dilihat pada gambar di bawah :

dasar pembuatan komponen vue js