Component Properties di Vue

Kali ini kita akan belajar cara menambahkan component properties di vue. Sebelumnya kita sudah belajar bagaimana cara membuat component di vue yang reusable. Nah, sekarang kita akan menambahkan properties pada component yang sudah kita buat sebelumnya. Jadi kalau sebelumnya component bisa diakses selayaknya elemen html sekarang kita akan menambahkan properties sehingga nanti component yang kita buat memiliki attribute seperti di html.

Wah, kalau bisa begitu enak ya. Oke, jadi untuk menambahkan properties pada component caranya sangatlah mudah. Kita hanya perlu menambahkan define props. Cara menulisnya adalah seperti ini.

const props = defineProps(array);

Fungsi defineProps harus diisi dengan array 1 dimensi. Item dari array merupakan nama properties yang ingin kita tambahkan, misalnya [“title”, “description”]. Untuk lebih jelasnya, perhatikan contoh component berikut:

<!--Child Component-->
<script setup lang="ts">
import {ref} from "vue";

const props = defineProps(["title", "description"]);

const counter = ref<number>(0);
</script>

<template>
  <div>
    <h1>{{props.title}}</h1>
    <p>{{props.description}}</p>
    {{counter}}
    <button @click="counter++">Increase Me</button>
  </div>
</template>

<style scoped></style>

Perhatikan contoh di atas, ketika kita sudah mendefiniskan props, cara memanggil props-nya cukup mudah. Kita tinggal definisikan konstanta lalu kita panggil saja dengan props.nama_propsnya. Untuk cara menggunakan component yang ada props-nya bisa dilihat pada contoh berikut ini:

<!--Main Component-->
<script setup lang="ts">

import ChildComponent from "./ChildComponent.vue";

</script>

<template>
  <ChildComponent title="First Counter" description="this is first counter"/>
  <ChildComponent title="Second Counter" description="this is second counter"/>
</template>

<style scoped></style>

Hasilnya bisa dilihat di bawah ini.

Properties pada component juga bisa loh kita set menggunakan v-bind:nama_properties atau langsung :nama_properties. Berikut ini caranya:

<!--Main Component-->
<script setup lang="ts">

import ChildComponent from "./ChildComponent.vue";

const firstTitle = "First Counter";
const secondTitle = "Second Counter";

</script>

<template>
  <ChildComponent :title="firstTitle" description="this is first counter"/>
  <ChildComponent v-bind:title="secondTitle" description="this is second counter"/>
</template>

<style scoped></style>

Dengan begitu kita bisa menggunakan variabel atau konstanta dari script.

Penamaan Properties

Nah, penamaan component properties di vue yang sebelumnya menggunakan 1 kata saja. Sekarang bagaimana jika kita menggunakan 2 kata atau lebih. Misalnya, kita punya title dan sub title. Tentu saja kita bisa membuat nama props-nya adalah subtitle, namun itu tidak umum. Bisanya 2 kata atau lebih dalam bahasa pemrograman itu dibuat camel case. Jadi, sub title seharusnya nama props-nya adalah subTitle. Nah, ada yang menarik nih. Ketika menggunakan component kita bisa memanggil properties camel case tersebut menggunakan kebab case. Jadi subTitle bisa kita akses menggunakan sub-title. Tapi jika ingin memanggilnya menggunakan subTitle juga tetap bisa. Untuk lebih jelasnya mari kita tambah contoh sebelumnya:

<script setup lang="ts">
import {ref} from "vue";

const props = defineProps(["title", "subTitle", "description"]);

const counter = ref<number>(0);
</script>

Sekarang kita punya 3 props, yaitu title, subTitle dan description. Cara memanggilnya adalah sebagai berikut:

<ChildComponent :title="firstTitle" sub-title="first sub title" description="this is first counter"/>

Validasi Component Properties di Vue

Selain menambahkan properties kita bisa juga mengatur properties yang akan dimasukkan oleh pengguna component. Beberapa hal yang bisa diatur dari properties adalah:

1. Tipe data, apakah number, string, boolean atau object.
2. Required, apakah properties harus diset, atau boleh tidak diset
3. Default Value, kita bisa menentukan jika ternyata properties tidak set, default value apa yang digunakan.
4. Validator, kita dapat membuat fungsi untuk memvalidasi nilai yang diinput pengguna component.

Cukup banyak ya yang bisa diatur, apakah kita harus mengatur satu persatu pada variable props? Tentu tidak, Vue sudah menyediakan cara mudah untuk mengatur properties. Caranya adalah parameter yang kita gunakan kita ubah menjadi object. Berikut ini contohnya

<!--Component Employee-->
<script setup lang="ts">
const props = defineProps({
  name: String,
  age: {
    type: Number,
    default: 20
  },
  nik: {
    type: [String, Number],
    required: true,
    validator(value: String): boolean {
      return value.length == 10;
    }
  }
});
</script>

Perhatikan potongan source code di atas. Kita menggunakan 3 properties dengan ketentuan sebagai berikut:

1. name, tipe datanya String. Karena tidak memiliki ketentuan lain, kita bisa menuliskan inline.
2. age, tipe datanya Number. Karena ada default value yang harus diset maka age dibuat dalam bentuk object dengan type = Number untuk mentukan tipe data dan default = 20 untuk menentukan bahwa nilai defaultnya jika tidak diisi adalah 20
3. nik, boleh menggunakan 2 tipe data yaitu String dan Number, jadi kita buat type bernilai array. Pada nik ini juga diberi validator bahwa panjang nik harus sama dengan 10 (hanya contoh saja ya).

Nah, bagaimana jika kita membuat component yang tidak sesuai dengan ketentuan yang diberikan? Ternyata komponen tersebut tetap dirender. Tapi nanti akan ada warning. Misalkan kita memanggil component seperti ini:

<template>
  <Employee name="Ardhan" age="25" nik="012345678"/>
</template>

Maka kita akan mendapatkan warning seperti ini.

Nah, jadi ketika kita tidak membuat component properties di vue yang sesuai ketentuan, komponen tersebut tetap dirender. Jadi tidak membuat komponen menjadi error.

Penutup

Nah, demikianlah sedikit penjelasan cara menambahkan component properties di vue. Caranya cukup mudah bukan. Jika masih kurang lengkap, teman-teman bisa melihat dokumentasi Vue JS. Selanjutnya kita akan membahas tentang event pada component. Tapi bukan di tulisan ini. Jadi nantikan kelanjutan tulisan vue series. Selamat belajar, semoga bermanfaat. 🤲