Component Vue.js
Hallo teman-teman. Kali ini kita akan membahas tentang komponen dalam Vue.js. Ada dua cara untuk meregistasi komponen dalam Vue.js, Yang pertama Global Component dan Local Component.
Vue.component(‘nama-komponen’, {
// … pilihan …
})
Untuk contoh scriptnya seperti pada gambar berikut:
new Vue({
//…
})
Untuk contoh perhatikan kode pada gambar berikut:
Kalau kita jalankan di web browser maka hasilnya akan seperti ini:
Hasilnya:
Kenapa harus menerapkan Mixins ? karena ketika sistem yang kita bangun terbilang besar, maka kita harus copy and paste code yang bersifat reusable di banyak component.
Data, mounted, created, update dan yang lain akan di-mix di berbagai component. Component-component tersebut akan mengakses jika mereka mendeklarasikannya di dalamnya.
Pada contoh kasus kali ini hanya contoh kasus sederhana bagaimana kita bisa membedakan antara komponen yang di definisikan dari mixins atau bukan. Scriptnya seperti berikut.
Pada component-a, kita memanggil mixins, sehingga text yang muncul berasal dari objek mixins yang dibuat, sementara component-b berasar dari component itu sendiri. Jika dijalankan pada browser maka akan seperti berikut.
Global Component
Global Component adalah cara registasi komponen di dalam Vue.js digunakan di dala template dari sebuah root instance vue (new Vue). Global Component bisa digunakan setelah registasi dulu dengan syntak berikut:
Vue.component(‘nama-komponen’, {
// … pilihan …
})
Untuk contoh scriptnya seperti pada gambar berikut:
Pada kode di atas komponen di registasi dulu dengan mendefinisikan <component-a> menjadi template <p>Component A</p>
Setelah registasi tinggal instasiasi objek vue di bawahnya dengan kode:
new Vue({
//…
})
Ini berlaku kepada semua sub komponen, dengan tiga komponen tersebut juga tersedia di dalam satu sama lain. Jalan di browser dan hasilnya seprti gambar berikut:
Kita bisa menambahkan secara langsung componen baru pada setiap objek vue.
Hasilanya akan seperti ini:
Local Component
Penerapan dalam global component jarang menjadi ideal. Untuk contoh ketika menggunakan global component bila kita berhenti menggunakan komponent masih termasuk di final build kita.
Maka dengan local component kita bisa menerapkan pada suatu objek dan hanya bisa di gunakan pada objek tersebut saja. Untuk mendefinisikanya hanya dengan objek javascript saja.
Untuk contoh perhatikan kode pada gambar berikut:
Kalau kita jalankan di web browser maka hasilnya akan seperti ini:
Jika kita tambahkan component baru secara langsung, maka tidak akan terjadi hal apapun.
Itu dikarenakan komponen yang diregistrasi secara local dan harus kita definisikan lagi pada instance objek vue nya agar komponen nya bisa digunakan.
Mixins
Mixins merupakan suatu cara yang flexible untuk mendistribusikan beberapa fungsi yang bisa dipakai di semua komponen vue. Objek pada mixin bisa berisi beberapa option di komponen. Ketika sebuah komponen menggunakan mixin, maka semua option yang ada di dalam mixin akan di “mix” (digabungkan) dengan option komponen itu sendiri.Kenapa harus menerapkan Mixins ? karena ketika sistem yang kita bangun terbilang besar, maka kita harus copy and paste code yang bersifat reusable di banyak component.
Data, mounted, created, update dan yang lain akan di-mix di berbagai component. Component-component tersebut akan mengakses jika mereka mendeklarasikannya di dalamnya.
Pada contoh kasus kali ini hanya contoh kasus sederhana bagaimana kita bisa membedakan antara komponen yang di definisikan dari mixins atau bukan. Scriptnya seperti berikut.
Pada component-a, kita memanggil mixins, sehingga text yang muncul berasal dari objek mixins yang dibuat, sementara component-b berasar dari component itu sendiri. Jika dijalankan pada browser maka akan seperti berikut.
Komentar
Posting Komentar