Props pada Vue.js
Alasan kuat mengapa saya harus menulis setiap dipelajari, karna satu-satunya cara mengikat ilmu adalah dengan cara menulisnya.
Maklum saja manusia dapat lupa dengan apa yang dipelajari.
Kali ini kita akan membahas tentang props. Jujur saya sendiri aja memahami konsep props ini cukup lama. Butuh mengulang-ulang beberapa kali menulis baris kode baru paham betul tentang konsepnya.
Jangan terlalu kuatir. Dokumentasi ini hanya memuat tentang basic dari props itu sendiri.
Mari kita mulai dari pengertian dan kegunaan dari props.
Props cara yang digunakan oleh vue untuk saling berkomunikasi antara komponen parent ke komponen child dan bekerja dari atas ke bawah.
Perhatikan gambar berikut ini untuk memahami alur komunikasi props dalam passing data.
Fokusnya cara komunikasi props yah. Untuk pembahasan $emit kita akan buat tutorialnya yang berbeda.
Anda juga dapat mempelajari $emit melalui tutorial $emit pada vuejs
Penulisan props
Penulisan atribut dalam HTML bersifat case-insensitif. Browser akan membaca penulisan huruf kapital menjadi huruf kecil. Jika anda menggunakan format penulisan pada props menggunakan camelCase maka saat penulisan attribut didalam template komponen dapat ditulis dalam kebab-case.
Mari perhatikan kode berikut ini untuk mempertegas penjelasan diatas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>belajar tentang props</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body> <div id="app">
<!-- penulisan attribut pada template menggunakan format kebab- case -->
<contoh nama-lengkap="Muhammad Iqbal"></contoh>
</div>
<script>
Vue.component('contoh', {
//penulisan value namaLengkap menggunakan format camelCase
props: ['namaLengkap'],
template: `
<p> {{ namaLengkap }} </p>
`
})
new Vue({ el: '#app' })
</script>
</body>
</html>
Dari kode diatas coba kita sedikit modifikasi dengan menambahkan satu element baru di bawah ‘nama lengkap’. Anggap saja template-nya menjadi seperti ini.
Vue.component('contoh', {
//penulisan value namaLengkap menggunakan format camelCase
props: ['namaLengkap', 'alamat'],
template: `
<p> {{ namaLengkap }} </p>
<p> {{ alamat }} </p>
`
})Pasti akan mengalami error seperti dibawah.
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them insteadSebagaimana dijelaskan bahwa template komponen pada vue.js hanya dapat berisi satu node root. Maka anda dapat merubahnya dengan cara berikut ini.
Vue.component('contoh', {
//penulisan value namaLengkap menggunakan format camelCase
props: ['namaLengkap', 'alamat'],
template: `
<p> {{ namaLengkap }} tinggal {{ alamat }} </p>
`
})Tipe Props
Terdapat dua tipe props yang di jumpai oleh penulisa dalam dokumentasi resmi vue.js.
Pertama adalah props berisikan array seperti yang telah di contohkan oleh penulis sebelumnya.
Kedua adalah props berisikan objek, dengan tipe objek maka setiap props akan memiliki value yang spesifik.
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}Tipe props yang berbentuk objek akan lebih mudah dalam melakukan validasi terhadap props.
Untuk lebih jelas nya anda dapat perhatikan kode berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<contoh nama="iqbal"></contoh>
</div>
<script>
Vue.component('contoh', {
props: {
nama: {
type: String,
required: true
},
kelas: {
type: Number,
default: 100
},
},
template: `
<p> {{ nama }} berada di {{ kelas }} </p>
`
})
new Vue({ el: '#app' })
</script>
</body>
</html>Passing Value
Diatas adalah cara passing value props dengan cara statis, namun bagaimana jika kita mengiginkan passing value dengan cara dinamis?
props pada vue dapat melakukannya, namun kita memerlukan v-bind untuk mengikat data tersebut.
Direktif v-bind sendiri dapat disingkat dengan tanda ‘ : ’ untuk lebih jelasnya dapat perhatikan kode di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<contoh-string :nama="nama"></contoh-string>
<contoh-number :kelas="kelas"></contoh-number>
<h3>riwayat pendidikan terakhir</h3>
<contoh-object
v-for="alamat in alamatSekolah"
:key="alamat.id"
:sekolah="alamat.sekolah"
:alamat="alamat.alamat"
></contoh-object>
</div>
<script>
//oper data sting
Vue.component('contoh-string', {
props: ['nama'],
template: `
<p> Nama : {{ nama }} </p>
`
})
//oper data number
Vue.component('contoh-number', {
props: ['kelas'],
template: `
<p> Kelas : {{ kelas }} </p>
`
})
//oper data array dan objek
Vue.component('contoh-object', {
props: ['sekolah', 'alamat', 'riwayat'],
template: `
<ul><li> {{ sekolah }} berada di {{ alamat }} </li></ul>
`
})
new Vue({
el: '#app',
data: {
nama: 'iqbal',
kelas: 30,
pendidikan: ['sd','smp'],
alamatSekolah : [
{key: 1, sekolah: 'sd 7', alamat: 'pontianak'},
{key: 2, sekolah: 'smp 7', alamat: 'wajok'}
]
}
})
</script>
</body>
</html>Atribut non-props
Atribut non props adalah sebuah atribut yang telah tersedia dalam didalam sebuah komponen, namun tidak didefenisikan sebelumnya didalam prop.
Pada contoh-contoh diatas kita telah mendefenisikan props, untuk melakukan passing informasi dari komponen parent ke komponen child.
Sebagai contohnya kita akan menggunakan framework bootstrap sebagai pihak ketiga untuk menambahkan atribut non-prop.
Anda dapat perhatikan kode berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attribut non prop</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> <div id="app">
<nama
class="form-control"
placeholder="masukan nama anda"
></nama>
</div> <script>
Vue.component('nama', { template: `<input>` })
new Vue({ el: '#app' })
</script></body>
</html>
bahwa class=”form-control” tidak terdefenisi didalam prop. Akan tetapi class=”form-control” memang bawaan dari bootstrap.
