Rumah > Artikel > pembangunan bahagian belakang > Vue.js memberikan konsep Props
Helo! Props ialah salah satu bahagian yang paling diperlukan dalam Vue.js, ia membenarkan pertukaran maklumat antara komponen. Menggunakan prop dilakukan di dalam fungsi persediaan. Di bawah ialah props
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script setup> import { defineProps } from 'vue' // Props-larni aniqlash const props = defineProps({ title: { type: String, required: true }, message: { type: String, default: 'Default message' } }) </script>
Di sini objek prop mentakrifkan tajuk dan prop mesej. jenis prop tajuk ialah String dan diperlukan (diperlukan: benar), dan mesej mempunyai jenis String dan nilai lalai (Mesej lalai).
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script setup> const props = defineProps({ title: { type: String, required: true }, message: { type: String, default: 'Default message' } }) // Props-larni ishlatish console.log(props.title) console.log(props.message) </script>
<script setup> const props = defineProps({ id: { type: Number, required: true }, user: { type: Object, default: () => ({ name: 'Johon', age: 30 }) } }) </script>
Dalam contoh di atas, prop id adalah jenis Nombor dan wajib, dan prop pengguna adalah jenis Objek dan mempunyai nilai lalai.
Nilai lalai membolehkan anda mentakrifkan nilai yang dipratentukan untuk prop dalam Vue 3. Jika tiada prop dihantar ke komponen, Vue menggunakan nilai lalai. Ini lebih mudah kerana ia menjadikan komponen lebih mudah digunakan dan lebih selamat.
Dalam artikel seterusnya, kita akan bercakap tentang pelepasan dalam Vue3.
Anda boleh mengikuti kami di rangkaian dan jika artikel itu berguna, kongsi dengan rakan anda dalam komen dan Vuechi. ?
Atas ialah kandungan terperinci Vue.js memberikan konsep Props. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!