Components merupakan salah satu fitur andalan yang dimiliki Vue.js, components membantu kita dalam mengubah jangkauan dari element dasar html menjadi lebih luas dan fleksibel.
Untuk secara ringkasnya components merupakan sebuah custom dari element html (tag) yang telah ‘ditambahkan’ beberapa kemampuan khusus didalamnya. Tidak hanya berupa custom element html saja, components juga dapat berupa element html baru, atau bahkan sebagai atribut dari element html tersebut. Satu buah komponen dapat berisikan beberapa element html didalamnya, component juga berfungsi sebagai template, nanti akan dipraktikan kemudian.
Cara membuat component adalah:
1 2 3 4 5 6 7 |
vue.component('nama_component', { isi_component }); var app = new Vue({ el: '#app' }); |
1 |
<nama_component></nama_component> |
1 2 3 |
vue.component('tebal', { //isi perintah }); |
1 2 3 |
vue.component('tebal', { template: `<b>Teks bold dari Fitur Andalan Vue Js Yaitu Component</b>` }); |
Dan juga jangan lupa objek Vue Jsnya juga harus tetap ada, jika tidak ada seolah seperti rumah kita yang nanti akan kehilangan koneksinya, so jangan lupa tambahkan ya. Untuk contohnya seperti dibawah ini
1 2 3 4 5 6 7 |
vue.compon<code>nt('tebal', { template: `<b>Teks bold dari Fitur Andalan Vue Js Yaitu Component</b>` }); var app = new Vue({ el: '#app' }); |
Untuk persiapan Fitur andalan Vue Js yaitu Component sudah selesai, saatnya memanggil component ‘tebal’ yang kita buat tersebut, di file HTML kita. Sebagai contoh seperti berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <tebal></tebal> </div> <script src="vue.min.js"></script> <script> vue.component('tebal', { template: `<b>Teks bold dari Fitur Andalan Vue Js Yaitu Component</b>` }); var app = new Vue({ el: '#app' }); </script> </body> </html> |