VueJS

Belajar Vue Js Bagian 10 : Components Basics

Hallo coder, ditutorial sebelumnya kita membahas Event Handling di vue js, sekarang kita akan membahas Components Basics di vue js.

Component merupakan sub class/objek dari Vue yang bisa kita buat untuk berbagai tujuan misalnya memecah kompleksitas kode. Setiap component memiliki lifecycle yang sama dengan objek Vuenya.

Untuk membuat sebuah component kita cukup, membuatnya seperti berikut.

Components Basics

kita akan membuat sebuah component sederhana seperti ini.

didalam code di atas kita hanya cuku memanggil <button-counter></button-counter> sesuai nama component yang kita daftarkan.

hasilnya akan seperti ini :

Reusable Component

Component yang ada kita bisa kita gunakan berkali kali seperti ini.

Organizing Components

Banyak component yang terdapat dalam sebuah website contohnya navigation links, blog posts, footer, sidebar dan sbb.

Terkadang kita ingin merubah salah satu component tersebut hanya dalam satu atau beberapa halaman yang ada. jika kita tidak pisah pisah antar component, maka dalam satu file terdapat banyak sekali code.

maka oleh sebab itu kita harus memisah misah setiap component tersebut agar mudah di panggil kembali.

Sebuah aplikasi Vue bisa dibangun dari beberapa component yang memiliki strukturnya hirarki. seperti gambar di atas. ada dua cara Component Registration didalam vue js, yaitu : global dan local.

Component Registration

Global Component

Register component secara global akan membuat component tersebut bisa digunakan oleh semua objek utama (root) Vue.

component diatas akan di daftarkan secara global, dapat digunakan pada vue root(new vue).

dan kita bisa memakainya seperti ini

Local Registration

Register component secara local artinya component tersebut diregister hanya pada objek tersebut, dan tidak bisa dipakai di objeck lain.

contohnya sepeti berikut ini

dan kita harus definisikan component tersebut seperti ini

Component Names

Component Names atau penamaan component di dalam vue js di bagi menjadi dua yaitu :

kebab-case

Format kebab-case menggunakan huruf lowercase dan tentunya di antara katanya di pisahkan – (strip). contohnya seperti berikut ini.

Ketika kita mendefinisikan component dengan menggunakan format kebab-case, maka komponen tersebut dapat diakses menggunakan custom element . <my-component-name>

PascalCase

Jika di PascalCase kita harus menggunakan huruf kapital di awal katanya, contohnya seperti berikut ini :

Ketika kita mendefinisikan component dengan menggunakan format PascalCase, maka kita bisa memilih untuk mengakses komponen tersebut dengan cara <my-component-name> atau <MyComponentName> . Namun hanya elemen kebab-case yang dianggap valid oleh DOM.

Materi dari Components Basics sudah beres di tutorial selanjutnya kita akan membahas bagian lanjutan dari component, jadi tetap pantengin web warungcode.com , jangan lupa share yah, salam coder .

www.domainesia.com