Props Vue memungkinkan Anda mendaftarkan atribut khusus pada suatu komponen. Cari tahu persis bagaimana menggunakannya.
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.
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 properti di Vue sederhana dan berbeda dari cara Anda mengoper alat peraga di Bereaksi. Untuk meneruskan prop dari komponen induk ke komponen turunannya di Vue, gunakan opsi props di skrip komponen turunan.
Berikut contohnya:
Komponen anak
<templat>
<div>
<h1>{{ judul }}h1>
<P>{{ pesan }}P>
<P>{{ alamat email }}P>
div>
templat>
<naskah>
standar ekspor {
nama: "Komponen Anak",
alat peraga: ["judul", "pesan", "alamat email"],
};
naskah>
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, pesan, Dan 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:
komponen induk
<templat>
<div>
<komponen anak
judul="Halo Dunia"
message="Ini adalah pesan dari komponen induk"
alamat email="[email protected]"
/>
div>
templat><naskah>
impor ChildComponent dari "./components/ChildComponent.vue";
standar ekspor {
nama: "Komponen Induk",
komponen: {
Komponen Anak,
},
};
naskah>
Komponen induk dalam blok kode di atas meneruskan tiga props ke komponen anak. Blok kode melewati nilai statis ke judul, pesan, Dan alamat email Atribut.
Anda juga dapat meneruskan nilai dinamis ke properti Anda dengan v-bind pengarahan. v-bind adalah arahan 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:
komponen induk
<templat>
<div>
<komponen anak
:judul= "judul"
:pesan= "pesan"
:alamat email= "alamat email"
/>
div>
templat><naskah>
impor ChildComponent dari "./components/ChildComponent.vue";
standar ekspor {
nama: "Komponen Induk",
komponen: {
Komponen Anak,
},
data() {
kembali {
judul: "Selamat datang sayang",
pesan: "Apa kabar",
Alamat email: "[email protected]",
};
},
};
naskah>
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 props dalam array memiliki kesamaan tipe data JavaScript.
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 jenis 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:
<templat>
<div>
<h1>{{ judul }}h1>
<P>{{ pesan }}P>
<P>{{ alamat email }}P>
div>
templat>
<naskah>
standar ekspor {
nama: "Komponen Anak",
Atribut: {
judul: {
jenis: Tali,
bawaan: "Judul Bawaan",
},
pesan: {
jenis: Tali,
bawaan: "Pesan Bawaan",
},
alamat email: {
jenis: Tali,
diperlukan: benar,
},
},
};
naskah>
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.
