Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan membahas tentang Apa itu VueJS – Components Part 3, lanjutan dari materi sebelumnya atau artikel saya sebelumnya. Bagi yang belum membacanya silahkan klik link berikut Apa itu VueJS – Components Part 2. Pada pembahasan ini kita akan belajar dinamis component setalah sebelumnya kita belajar tentang dasar – dasar komponen, data dan method. Pada pembahasan ini kita masih menggunakan file yang sama atau yang saya gunakan sebelumnya.
Komponen Dinamis
Komponen dinamis dibuat menggunakan kata kunci <component> </ component> dan terikat menggunakan properti seperti yang ditunjukkan pada contoh berikut.
Contoh, silahkan teman – teman rubah file yang sebelumnya seperti di bawah ini;
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>
Oke kalau sudah silahkan Anda save dan jalankan pada browsernya.
Keluaran
Komponen Dinamis
Komponen dinamis dibuat menggunakan sintaks berikut.
<component v-bind: is = “view”> </ component>
Ini memiliki v-bind: is = “view”, dan tampilan nilai ditugaskan untuk itu. Tampilan didefinisikan dalam contoh Vue sebagai berikut.
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
Ketika dieksekusi, template Komponen Dinamis ditampilkan di browser. Oke itulah tadi pembahasan saya tentang Apa itu VueJS – Components Part 3, cukup simple karena ini lanjutan dari artikel sebelumnya semoga bermanfaat.