Melanjutkan materi sebelumnya Dasar Pembuatan Komponen Vue.js, kali ini saya akan menunjukkan cara membuat komponen di dalam komponen pada Vue.js (dikenal dengan istilah child component).

Buat file latihan008.html, lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 008</title>
</head>
<body>
    <div id="app">
        <pemain-bola></pemain-bola>
    </div>
    <script src="vue.js"></script>
    <script src="latihan008.js"></script>
</body>
</html>

dan file latihan008.js dengan kode berikut :

Vue.component('PemainBola', {
    template: `
        <div>
            <penjaga-gawang></penjaga-gawang>
        </div>
    `
});

Vue.component('PenjagaGawang', {
    template: `
        <li>
            Alisson Becker
        </li>
    `
});

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

Pada kode di atas, saya memiliki 2 (dua) komponen Vue, yaitu PemainBola (komponen utama) dan PenjagaGawang (komponen yang berada di dalam komponen PemainBola). Komponen utama dapat diakses di halaman HTML melalui baris kode :

<div id="app">
    <pemain-bola></pemain-bola>
</div>

Elemen <pemain-bola></pemain-bola> akan me-render template yang ada di dalam blok kode Vue.component('PemainBola', { }). Di dalam option template tersebut, saya melakukan pemanggilan komponen lainnya, yaitu : PenjagaGawang melalui baris kode <div><penjaga-gawang></penjaga-gawang></div>. Hasilnya dapat dilihat pada gambar berikut :

komponen di dalam komponen vue js

Jika sebelumnya komponen PenjagaGawang hanya diisi konten tunggal 'Alisson Becker', sekarang kita akan menampilkan beberapa nama penjaga gawang berbeda yang ada di dalam property listGoalKeeper untuk di-render dengan directive v-for.

Perbarui file latihan008.js dengan baris kode berikut :

Vue.component('PemainBola', {
    template: `
        <div>
            <penjaga-gawang v-for="goalKeeper in listGoalKeeper">
                {{ goalKeeper.nama }} -- {{ goalKeeper.pensiun ? 'Pensiun' : 'Aktif' }}
            </penjaga-gawang>
        </div>
    `,
    data() {
        return {
            listGoalKeeper: [
                { nama: 'Fabien Barthez', pensiun: true },
                { nama: 'Alisson Becker', pensiun: false },
                { nama: 'Peter Schmeichel', pensiun: true },
                { nama: 'Kasper Schmeichel', pensiun: false },
                { nama: 'Thibaut Courtois', pensiun: false },
                { nama: 'Gianluga Pagliuca', pensiun: true },
                { nama: 'David De Gea', pensiun: false },
            ]
        }
    }
});

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

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

Baris kode <penjaga-gawang v-for="goalKeeper in listGoalKeeper"> memanggil komponen goalKeeper untuk me-render template <li><slot></slot></li>. Konten masing-masing <slot></slot> diperoleh dari alias goalKeeper di perulangan collection v-for="goalKeeper in listGoalKeeper".

{{goalKeeper.nama}} -- {{goalKeeper.pensiun?'Pensiun':'Aktif'}} akan menjadi konten yang diteruskan ke <slot></slot>. Jika property goalKeeper.pensiun bernilai true, maka tampilkan string 'Pensiun', namun apabila bernilai false, tampilkan string 'Aktif'.

komponen di dalam komponen vue js

Sekilas, tidak ada masalah apapun dari kode di atas. Akan tetapi, jika tab Console di sebelah tab Elements kita klik, maka akan muncul peringatan component lists rendered with v-for should have explicit keys seperti di bawah ini :

komponen di dalam komponen vue js

Cara mengatasinya, cukup rubah baris kode berikut :

<penjaga-gawang v-for="goalKeeper in listGoalKeeper">

menjadi :

<penjaga-gawang v-for="(goalKeeper, index) in listGoalKeeper" :key=index>

Penggunaan atribut :key sangat disarankan dalam perulangan directive v-for (terutama di child component), tujuannya agar Vue dapat melakukan tracking id setiap node (alias yang di-render). Penjelasan tentang format v-for="(alias,index) in collection" dapat Anda baca di materi Menggunakan Directive v-if v-show v-else Pada Vue.js

komponen di dalam komponen vue js

Catatan :
Pada blok kode new Vue({ }) option data cukup ditulis dengan data: saja. Sedangkan di blok kode Vue.component( ), option data harus ditulis seperti jika kita menggunakan fungsi. Perhatikan perbedaannya di bagian data() dan return !

data() {
    return {
        property: { key:value }
    }
}

atau bisa juga ditulis menggunakan format berikut :

data: function() {
    return {
        property: { key:value }
    }
}

Selain itu, pemberian nama pada komponen Vue juga dapat ditulis dengan beberapa cara / gaya, antara lain :

  • kebab-case : Vue.component('penjaga-gawang',{ })
  • camelCase : Vue.component('penjagaGawang',{ })
  • PascalCase : Vue.component('PenjagaGawang',{ })

Penamaan komponen di sisi Vue umumnya ditulis dengan gaya PascalCase (PenjagaGawang), sedangkan pemanggilan komponen di sisi HTML biasanya ditulis dengan kebab-case (penjaga-gawang).