Membuat Reusable Input Component pada Vue 3
Halo, teman-teman! Bagi kalian yang suka ngoding dengan Vue.js, pasti tahu betapa pentingnya membuat komponen yang bisa digunakan kembali (reusable components). Salah satu komponen yang sering kita butuhkan adalah input field. Nah, kali ini kita akan belajar cara membuat reusable input component di Vue 3. Yuk, simak langkah-langkahnya!
Kenapa Harus Membuat Reusable Component?
Sebelum kita mulai, mari kita bahas sedikit tentang keuntungan dari reusable component. Dengan membuat komponen yang bisa digunakan kembali, kita bisa:
- Menghemat Waktu: Tidak perlu menulis kode yang sama berulang kali.
- Meningkatkan Konsistensi: Semua input field akan memiliki tampilan dan perilaku yang sama.
- Memudahkan dalam Maintance: Jika ada perubahan, kita hanya perlu memperbarui satu komponen saja.
Langkah-Langkah Membuat Reusable Input Component
1. Buat Proyek Vue 3 Baru:
Jika kalian belum punya proyek Vue 3, kalian bisa membuatnya dengan Vue CLI. Buka terminal dan jalankan perintah berikut:
vue create my-vue-app
cd my-vue-app
2. Buat Komponen Input
Di dalam folder `src/components`, buat file baru bernama `ReusableInput.vue`. Ini adalah tempat kita akan mendefinisikan komponen input kita.
3. Tulis Kode untuk Komponen
Buka `ReusableInput.vue` dan tambahkan kode berikut:
<template>
<div class="input-group">
<label :for="id">{{ label }}</label>
<input
:id="id"
:type="type"
v-model="inputValue"
@input="updateValue"
:placeholder="placeholder"
class="form-input"
/>
</div>
</template>
<script>
export default {
name: 'ReusableInput',
props: {
label: {
type: String,
required: true,
},
id: {
type: String,
required: true,
},
type: {
type: String,
default: 'text',
},
placeholder: {
type: String,
default: '',
},
modelValue: {
type: String,
default: '',
},
},
data() {
return {
inputValue: this.modelValue,
};
},
methods: {
updateValue() {
this.$emit('update:modelValue', this.inputValue);
},
},
watch: {
modelValue(newValue) {
this.inputValue = newValue;
},
},
};
</script>
<style scoped>
.input-group {
margin-bottom: 1rem;
}
.form-input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
Di sini, kita membuat komponen input yang menerima beberapa props seperti `label`, `id`, `type`, `placeholder`, dan `modelValue`. Kita juga menggunakan `v-model` untuk mengikat nilai input dengan model data di komponen yang lebih tinggi.
4. Menggunakan Komponen di App.vue
Sekarang, kita akan menggunakan komponen `ReusableInput` di `App.vue`. Buka file `App.vue` dan tambahkan kode berikut:
<template>
<div id="app">
<h1>Contoh Reusable Input Component</h1>
<ReusableInput
label="Nama"
id="name"
v-model="name"
placeholder="Masukkan nama Anda"
/>
<ReusableInput
label="Email"
id="email"
type="email"
v-model="email"
placeholder="Masukkan email Anda"
/>
<p>Nama: {{ name }}</p>
<p>Email: {{ email }}</p>
</div>
</template>
<script>
import ReusableInput from './components/ReusableInput.vue';
export default {
name: 'App',
components: {
ReusableInput,
},
data() {
return {
name: '',
email: '',
};
},
};
</script>
<style>
#app {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
font-family: Arial, sans-serif;
}
</style>
Di sini, kita mengimpor komponen `ReusableInput` dan menggunakannya untuk membuat dua input field: satu untuk nama dan satu untuk email. Kita juga menampilkan nilai yang dimasukkan di bawah input.
5. **Jalankan Aplikasi**:
- Setelah semua kode ditulis, jalankan aplikasi dengan perintah berikut:
npm run serve
- Buka browser dan akses `http://localhost:8080`. Kalian akan melihat aplikasi dengan dua input field yang bisa digunakan!
Kesimpulan
Nah, itu dia cara membuat reusable input component di Vue 3! Dengan komponen ini, kalian bisa dengan mudah menambahkan input field di berbagai bagian aplikasi tanpa harus menulis kode yang sama berulang kali. Semoga artikel ini bermanfaat dan bikin kalian lebih semangat ngoding dengan Vue.js! Jangan lupa untuk mampir lagi ke blog ini untuk informasi menarik lainnya! Sampai jumpa, teman-teman!
