Cara Menggunakan Props untuk Membuat Komponen Vue Lebih Baik
Table of content:
Salah satu fitur utama Vue adalah arsitektur modularnya, yang memungkinkan Anda membangun aplikasi web dengan menggabungkan komponen kecil yang dapat digunakan kembali. Ini memungkinkan Anda untuk memperbarui dan memelihara aplikasi web Anda dengan mudah.
Setiap komponen di Vue dapat memiliki kumpulan data dan metodenya sendiri, yang dapat Anda turunkan ke komponen turunannya dengan props. Di sini, Anda akan mempelajari cara menggunakan props di Vue untuk meneruskan data dari komponen parent ke child.
Apa itu Props di Vue?
Props—singkatan dari “properties”—adalah atribut khusus di Vue yang dapat diturunkan oleh komponen induk ke komponen turunannya.
Baca Juga:
Di Vue, komponen induk mengirimkan props ke komponen anak dalam alur searah. Ini berarti bahwa komponen anak hanya dapat membaca dan menggunakan props yang diteruskan tetapi tidak dapat mengubah data.
Menggunakan alat peraga memungkinkan Anda membuat komponen yang dapat digunakan kembali yang dapat Anda terapkan di seluruh aplikasi Anda. Alat peraga menghemat waktu dan tenaga Anda, karena Anda dapat menggunakan kembali komponen daripada membuat komponen baru dari awal.
Cara Mengoper Props di Vue
Melewati props di Vue sederhana dan berbeda dari cara Anda melewatkan props di React. Untuk meneruskan prop dari komponen induk ke komponen turunannya di Vue, gunakan opsi props di skrip komponen turunan.
Berikut contohnya:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ emailAddress }}</p>
</div>
</template><script>
export default {
name: "ChildComponent",
props: ["title", "message", "emailAddress"],
};
</script>
Blok kode di atas menjelaskan komponen anak Vue yang menggunakan alat peraga untuk meneruskan data dari komponen induk. Komponen mencakup tiga elemen HTML yang menampilkan judul, pesanDan alamat email properti dengan interpolasi.
Itu Atribut opsi di komponen anak mengambil array properti. Larik ini mendefinisikan properti yang diterima komponen anak dari komponen induk.
Berikut adalah contoh komponen induk Vue yang meneruskan data ke komponen anak Atribut:
<template>
<div>
<child-component
title="Hello World"
message="This is a message from the parent component"
emailAddress="user0000@example.com"
/>
</div>
</template><script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
};
</script>
Komponen induk dalam blok kode di atas meneruskan tiga props ke komponen anak. Blok kode melewati nilai statis ke judul, pesanDan alamat email Atribut.
Anda juga dapat meneruskan nilai dinamis ke properti Anda dengan v-bind pengarahan. v-bind adalah arahan yang digunakan di Vue untuk mengikat data ke atribut HTML.
Berikut adalah contoh komponen induk Vue yang menggunakan v-bind direktif untuk meneruskan nilai dinamis ke alat peraga:
<template>
<div>
<child-component
:title= "title"
:message= "message"
:emailAddress= "emailAddress"
/>
</div>
</template><script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
data() {
return {
title: "Welcome dear",
message: "How are you",
emailAddress: "user0000@gmail.com",
};
},
};
</script>
Menggunakan v-bind direktif untuk mengirimkan data ke komponen anak, Anda dapat memperbarui nilai properti berdasarkan status komponen induk. Misalnya dengan mengubah judul properti data di komponen induk, the judul prop yang diteruskan ke komponen anak juga akan diperbarui.
Metode mendefinisikan alat peraga sebagai larik string ini adalah pola steno. Setiap string dalam array mewakili sebuah prop. Metode ini sangat ideal ketika semua properti dalam array memiliki tipe data JavaScript yang sama.
Mendefinisikan Props sebagai Objek di Vue
Mendefinisikan alat peraga sebagai objek JavaScript alih-alih array memungkinkan penyesuaian yang lebih baik dari setiap alat peraga. Mendefinisikan props sebagai objek dalam komponen akan memungkinkan Anda untuk menentukan tipe data dan nilai default yang diharapkan dari setiap props.
Selain itu, Anda dapat menandai alat peraga tertentu sesuai kebutuhan, memicu peringatan jika alat peraga tidak disediakan saat komponen sedang digunakan. Mendefinisikan props sebagai objek menawarkan beberapa keuntungan dibandingkan mendefinisikan props sebagai array, termasuk:
- Menentukan tipe data yang diharapkan dan nilai default untuk setiap prop memudahkan Anda dan tim pengembang untuk memahami cara menggunakan komponen dengan tepat.
- Dengan menandai alat peraga sesuai kebutuhan, Anda dapat menemukan kesalahan di awal proses pengembangan dan memberikan lebih banyak informasi kepada tim pengembang.
Berikut adalah contoh cara mendefinisikan props sebagai objek dalam komponen Vue.js:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ emailAddress }}</p>
</div>
</template><script>
export default {
name: "ChildComponent",
props: {
title: {
type: String,
default: "Default Title",
},
message: {
type: String,
default: "Default Message",
},
emailAddress: {
type: String,
required: true,
},
},
};
</script>
Blok kode ini adalah contoh komponen Vue.js yang menggunakan props untuk meneruskan data dari komponen induk ke komponen anak. Blok kode mendefinisikan props ini sebagai objek dengan tipe dan nilai default atau flag yang diperlukan.
Blok kode mendefinisikan judul Dan pesan alat peraga sebagai string dengan a bawaan nilai dan alamat email penyangga sebagai diperlukan rangkaian.
Pilih Metode Terbaik yang Sesuai dengan Aplikasi Vue Anda
Anda telah belajar bagaimana mendefinisikan props baik sebagai array maupun objek. Preferensi Anda harus sesuai dengan kebutuhan spesifik aplikasi Anda.
Vue membuktikan dirinya sebagai framework JavaScript yang sangat fleksibel. Ini menawarkan banyak metode dan opsi untuk mencapai tujuan yang sama dengan keuntungan berbeda untuk opsi atau metode apa pun yang Anda pilih untuk dikerjakan.
Artikel Terkait
