VueJS - Komponen: Blok Pembangunan Aplikasi Web Modern

Hai teman-teman, para ahli Vue.js masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia komponen Vue.js. Sebagai seseorang yang telah mengajarkan pemrograman selama tahun tahun, saya bisa katakan bahwa memahami komponen adalah seperti belajar menggunakan blok LEGO - sekali Anda mengenalinya, Anda bisa membangun hal yang menakjubkan! Jadi, mari kita masuk dan bersenang-senang!

Apa Itu Komponen Vue.js?

Komponen adalah hati dan jiwa dari aplikasi Vue.js. Picturkanlah mereka sebagai bagian kode yang dapat digunakan kembali yang menyusun HTML, CSS, dan fungsionalitas JavaScript. Seperti halnya Anda dapat menggunakan berbagai blok LEGO untuk membangun sebuah istana, Anda dapat menggunakan komponen yang berbeda untuk membangun sebuah aplikasi web yang kompleks.

Berikut adalah contoh sederhana dari komponen Vue:

<template>
<div class="greeting">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
data() {
return {
message: "Hello, Vue Component!"
}
}
}
</script>

<style scoped>
.greeting {
color: blue;
}
</style>

mari kitauraikan ini:

1. Bagian <template> mengandung struktur HTML dari komponen kami.
2. Bagian <script> menentukan logika dan data komponen.
3. Bagian <style> (dengan atribut scoped) mengandung CSS yang hanya berlaku untuk komponen ini.

Membuat dan Menggunakan Komponen

Sekarang kita tahu wajah komponen, mari kita buat dan gunakan komponen di aplikasi kita!

Langkah 1: Buat Komponen Baru

Buat file baru bernama Greeting.vue di folder components proyek Anda:

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ greeting }}</h2>
</div>
</template>

<script>
export default {
data() {
return {
greeting: "Welcome to Vue.js!"
}
}
}
</script>

<style scoped>
.greeting {
font-style: italic;
color: green;
}
</style>

Langkah 2: Gunakan Komponen di Aplikasi

Sekarang, gunakan komponen ini di file App.vue utama:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting />
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'

export default {
name: 'App',
components: {
Greeting
}
}
</script>

Lihat apa yang terjadi:

1. Kita mengimpor komponen Greeting.
2. Kita mendaftarkan komponen ini di opsi components komponen App.
3. Kita gunakan komponen ini di template dengan tag <Greeting />.

Dan voilà! Anda baru saja membuat dan menggunakan komponen Vue pertama Anda!

Props: Mengirim Data ke Komponen

Props adalah seperti pipa ajaib yang memungkinkan Anda mengirim data dari komponen induk ke komponen anak. Mari kita tingkatkan komponen Greeting agar menerima pesan khusus:

<!-- Greeting.vue -->
<template>
<div class="greeting">
<h2>{{ customGreeting }}</h2>
</div>
</template>

<script>
export default {
props: ['message'],
computed: {
customGreeting() {
return `${this.message} Welcome to Vue.js!`
}
}
}
</script>

Sekarang, kita dapat menggunakannya seperti ini di App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Greeting message="Hello, dear student!" />
<Greeting message="Greetings, Vue enthusiast!" />
</div>
</template>

Apakah itu menarik? Kita dapat menggunakan komponen yang sama dengan pesan yang berbeda!

Mengirimkan Event: Komunikasi Anak-ke-Induk

Meskipun props memungkinkan komunikasi induk-ke-anak, event memungkinkan komunikasi anak-ke-induk. Itu seperti anak meminta es krim kepada orang tua mereka!

Buatlah komponen Button yang mengirimkan event saat diklik:

<!-- Button.vue -->
<template>
<button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
props: ['label'],
methods: {
handleClick() {
this.$emit('button-clicked', 'The button was clicked!')
}
}
}
</script>

Sekarang, gunakan ini di App.vue:

<!-- App.vue -->
<template>
<div id="app">
<h1>My Vue.js App</h1>
<Button label="Click me!" @button-clicked="handleButtonClick" />
<p>{{ message }}</p>
</div>
</template>

<script>
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Button
},
data() {
return {
message: ''
}
},
methods: {
handleButtonClick(msg) {
this.message = msg
}
}
}
</script>

Saat tombol diklik, itu mengirimkan event yang komponen induk mendengarkan dan merespon. Itu seperti sebuah percakapan harmonis dalam keluarga!

Slots: Konten Komponen Fleksibel

Slots adalah seperti placeholder di komponen Anda yang Anda dapat isi dengan konten apa pun yang Anda inginkan. Mereka sangat berguna untuk membuat komponen yang fleksibel dan dapat digunakan kembali.

Buatlah komponen Card dengan slot:

<!-- Card.vue -->
<template>
<div class="card">
<div class="card-header">
<h3>{{ title }}</h3>
</div>
<div class="card-body">
<slot></slot>
</div>
</div>
</template>

<script>
export default {
props: ['title']
}
</script>

<style scoped>
.card {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.card-header {
background-color: #f1f1f1;
padding: 5px;
}
</style>

Sekarang kita dapat menggunakan komponen Card dengan konten yang berbeda:

<!-- App.vue -->
<template>
<div id="app">
<Card title="Welcome">
<p>Welcome to our Vue.js tutorial!</p>
</Card>
<Card title="About Components">
<ul>
<li>Components are reusable</li>
<li>They can have props</li>
<li>They can emit events</li>
</ul>
</Card>
</div>
</template>

<script>
import Card from './components/Card.vue'

export default {
name: 'App',
components: {
Card
}
}
</script>

Komponen Dinamik

Komponen dinamik memungkinkan Anda beralih antara komponen yang berbeda secara dinamik. Itu seperti memiliki pisau Swiss Army dari komponen!

Buatlah contoh sederhana:

<!-- App.vue -->
<template>
<div id="app">
<button @click="currentComponent = 'Greeting'">Show Greeting</button>
<button @click="currentComponent = 'Button'">Show Button</button>
<component :is="currentComponent"></component>
</div>
</template>

<script>
import Greeting from './components/Greeting.vue'
import Button from './components/Button.vue'

export default {
name: 'App',
components: {
Greeting,
Button
},
data() {
return {
currentComponent: 'Greeting'
}
}
}
</script>

Dalam contoh ini, kita menggunakan elemen <component> dengan atribut is untuk secara dinamik menampilkan komponen Greeting atau Button tergantung pada tombol mana yang diklik.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia menakjubkan komponen Vue.js. Ingat, seperti dengan setiap keterampilan, latihan membuat sempurna. Jangan khawatir untuk mencoba dan membangun komponen Anda sendiri. Sebelum Anda tahu, Anda akan dapat membuat aplikasi web yang kompleks dan interaktif dengan mudah!

Berikut adalah tabel rujukan cepat dari fitur komponen yang kita cover:

Fitur	Deskripsi
Struktur Dasar	Template, Script, dan bagian Style
Props	Mengirim data dari induk ke anak
Event	Komunikasi dari anak ke induk
Slots	Placeholder konten fleksibel
Komponen Dinamik	Beralih antara komponen secara dinamik

Terus coding, terus belajar, dan terutama, bersenang-senang dengan Vue.js!

Credits: Image by storyset