Component Vue.js

Hallo teman-teman pada kesempatan 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 …

})

Sebagai contoh pada script 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 bahkan 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.

Jalankan kembali di browser.

Local Component

Pada 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.

Sebagai contoh pada script dibawah ini.

Ketika di jalankan pada browser hasilnya seperti berikut.

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.

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.

Cukup sekian pembahasan mengenai component pada vue.js, semoga bermafaat.