Component Vue.js

kali ini saya akan membahas mengenai component pada vue.js. Terdapat 2 cara untuk meregistrasi component pada vue.js yaitu dengan global component, dan local component.

Global Component

Global Component yaitu cara meregistrasi komponen di dalam vue.js yang digunakan di dalam template dari semua root instance vue (new Vue). Global component ini dapat digunakan setelah di registrasi terlebih dahulu dengan syntax :

Vue.component(‘nama-komponen-saya’, {

          // … pilihan …

})

Scriptnya seperti dibawah ini

Pada script di atas component di registrasi terlebih dahulu dengan mendefinisikan <component-a> menjadi template ‘<p>Component A</p>’ begitupun dengan <component-b> dan <component-c>.

Setelah diregistrasi, kita tinggal instasiasi objek vue dibawahnya dengan syntax :

new Vue({

           //…

})

ini juga berlaku kepada semua sub komponen, dengan kata lain tiga komponen tersebut juga tersedia di dalam satu sama lain. Untuk mencoba nya kita bisa jalankan pada browser maka hasilnya akan seperti berikut.

Kita bisa menambahkan secara langsung componen baru pada setiap objek vue.

setelah ditambahkan, mari kita coba jalankan pada browser maka hasilnya seperti berikut

Local Component

implementasinya, global component jarang menjadi ideal. Sebagai contoh, ketika kita menggunakan build system seperti Webpack, jika menggunakan global component, apabila kita berhenti menggunakan sebuah komponen, itu masih termasuk di final build kita.

Maka dengan local component kita bisa mendefinisikan pada suatu objek dan hanya bisa digunakan pada objek tersebut saja. Untuk mendefinisikannya hanya dengan objek javascript biasa.

seperti pada script dibawah ini.

kemudain kita coba jalankan pada browser, maka hasilnya seperti berikut

Jika kita tambahkan component baru secara langsung, maka tidak akan terjadi hal apapun. contohnya seperti berikut

maka jika dijalankan pada broser hasilnya tetap sama tidak ada perubahan seberti berikut

Itu dikarenakan komponen yang diregistrasi secara local dan harus kita definisikan lagi pada instance objek vue nya agar komponen nya bisa digunakan, seperti berikut,

maka sekarang terlihat perubahaannya seperti berikut

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.

Contoh kasus mixins

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.

sekian untuk pembahasan mengenai component pada vue.js
semoga bermanfaat!!!!