COMPONENT PADA VUE.JS


Meneruskan pembahasan sebelumnya , kali ini aku akan membahas component pada pada vue js. di vue js terdapat dua component yaitu:

1. Global Component
Global component mendaftarkan terlebih dahulu component agar bisa digunakan menggunakan method.

dengan contoh code dan syntax berikut:


di line no 19

Vue.component('nama component yang akan di daftarkan')
dengan menggunakan template : `<p>Component yang akan di tampilkan</p>

lalu di  instance dengan syntax berikut untuk mengatur component dan data yang  meiliki keterikatan dengannya.






sehingga nanti akan muncul seperti berikut:


 dan jika ingin menambah component baru bisa di tambahkan lagi pada line 11 dan 16 kemudian meregistrasi kembali component baru untuk di instance.

2.Local Component
 masih berhubungan dengan global component di atas maka dari itu
Local Component juga bisa diartikan menetapkan komponen sebagai objek Javascript. yang fokus yang di register objeknya hanya dapat digunakan pada suatu objek yang di artikan saja.

 maksud dari penambahan komponen juga jika tidak di resgistrasi untuk di instance tidak akan muncul maka dari itu komponen yang akan diregistrasi secara local  harus  didefinisikan terlebih dahulu pada instance objek vue nya agar komponen nya dapat digunakan.

Mixins
yaitu cara yang digunakan untuk pendistribusian beberapa fungsi yang bisa dipakai di semua komponen vue menggabungkan option yang ada di dalam mixin akan di “mix”dengan option komponen itu sendiri.

dengan contoh sebagai berikut:



dengan hasil sebgai berikut:

component a yang di panggil dari component dengan instance dari new vue({ el: '#app'.....
sementara mixins di component b memanggil object yang muncul dari apa yang sudah dibuat.


Komentar

Postingan Populer