VueJS - Komponen: Blok Pembinaan Aplikasi Web Modern

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

Apa Itu Komponen Vue.js?

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

Ini 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: biru;
}
</style>

Berpisah-pisah ini:

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

Membuat dan Menggunakan Komponen

Sekarang kita tahu bagaimana komponen terlihat, mari kita buat satu dan gunakan nya dalam aplikasi kita!

Langkah 1: Buat Komponen Baru

Buat sebuah 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: hijau;
}
</style>

Langkah 2: Gunakan Komponen dalam Aplikasi

Sekarang, gunakan komponen ini dalam 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>

Ini apa yang terjadi:

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

Dan voilà! Anda telah 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 untuk 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

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

Mari kita buat 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, mari kita 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 keluarga!

Slots: Konten Komponen Flexibel

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

Mari kita buat 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 untuk beralih antara komponen yang berbeda secara dinamik. Itu seperti memiliki pisau Swiss Army dari komponen!

Mari kita buat 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 telah mengambil langkah pertama ke dunia menakjubkan komponen Vue.js. Ingat, seperti dengan setiap keterampilan, latihan membuat sempurna. Jangan takut untuk mencoba dan membuat komponen Anda sendiri. Sebelum Anda tahu, Anda akan membuat aplikasi web yang kompleks dan interaktif dengan mudah!

Berikut adalah tabel rujukan cepat dari fitur komponen yang kita telah bahas:

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