Table of Content
Introduction
Component merupakan fitur andalan VueJS yg bisa membantu kita dalam mengubah jangkauan elemen html menjadi lebih luas dan fleksibel. Selain itu dapat dipangil berulang kali. Tidak hanya custom elemen html saja, component juga dapat berupa elemen html baru.
app.js
Vue.component('tebal', {
template: '<b>ini tulisan dari componen tebal</b>'
})
let app = new Vue({
el: '#app'
})index.html
<div id="app">
<tebal></tebal>
</div>Slot in Action
Sebelumnya kita telah hardcode component di template, jika kita menambahkan <tebal>haloo</tebal> di html maka tidak akan berubah. Supaya bisa menambahkan nilai, gunakan slot.
app.js
Vue.component('tebal', {
template: '<b><slot></slot></b>'
})
let app = new Vue({
el: '#app'
})index.html
<div id="app">
<tebal>Halooo Apa Kabar?</tebal>
</div>Component, Slot, Array
app.js
Vue.component('daftar', {
template: '<div><siswa v-for="ds in daftarsiswa">{{ ds.nama }} {{ ds.kelas }}</siswa></div>',
data: function(){
return {
daftarsiswa: [
{nama: 'Ucup', kelas: 'X Animasi'},
{nama: 'Kecup', kelas: 'XI Animasi'},
{nama: 'Kecap', kelas: 'XII Animasi'}
]
}
}
})
Vue.component('siswa', {
template: '<li><slot></slot></li>'
})
let app = new Vue({
el: '#app'
})index.html
<div id="app">
<daftar></daftar>
</div>Penjelasan :
- kita membuat dua component, component untuk menampung data dan component untuk melakukan looping data.
- Jangan lupa sebelum looping di component, berikan tag kosong
(<div>)
Passing Data ke Props
Props merupakan atribut custom yg diletakkan pada component, nilai atribut akan diolah kembali. Props menggunakan data bertipe array sehingga satu buah component dapat memiliki lebih dari satu prop.
app.js
Vue.component('karya', {
props: ['judul', 'pengarang'],
template: '<div><h2>{{ judul }}</h2><p>Author: {{ pengarang }}</p></div>'
})
let app = new Vue({
el: '#app'
})index.html
<div id="app">
<karya judul="Menguasai VueJS" pengarang="Luthfi Gani"></karya>
</div>