Assalamu alaykum ! Props - Vue.js ning eng kerakli qismilaridan biri bo'lib, komponentlar aro ma'lumotni almashinish imkonini beradi. props-larni ishlatish setup funksiyasi ichida amalga oshiriladi. Quyida props-larni bilan qanday ishlash haqida batafsil ko'rishimiz mumkin:</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172911651217467.jpg" alt="Vue.js da Props tushunchasi"></p> <ol> <li> <strong>Props-larni aniqlash</strong>: <strong>Vue.js</strong> da props-larni aniqlash uchun defineProps funksiyasidan foydalaniladi. defineProps obyekti props-larning turlarini va xususiyatlarini belgilash uchun ishlatiladi. </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><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' } }) Nach dem Login kopieren Bu yerda props obyekti title va message prop-larini aniqlaydi. title prop turi String va majburiy (required: true), message esa String turi va default qiymatga ega (Default message). Props-larni ishlatish: defineProps funksiyasi orqali aniqlangan props-larni bevosita ichida yoki ichida ishlatish mumkin. </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><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) Nach dem Login kopieren Prop-larni type va validation: defineProps yordamida prop-lar turlarini va validatsiyasini belgilash mumkin. Vue 3 validatsiya uchun typelar berishimiz mumkin, masalan String, Number, Boolean, Array, Object ... const props = defineProps({ id: { type: Number, required: true }, user: { type: Object, default: () => ({ name: 'Johon', age: 30 }) } }) Nach dem Login kopieren Yuqoridagi misolda id prop Number turi va majburiy, user prop esa Object turi va default qiymatga ega bo'ladi. default qiymat Vue 3 da props-lar uchun oldindan belgilangan qiymatlarni aniqlash imkonini beradi. Agar props komponentga yuborilmasa, Vue default qiymatni ishlatadi. Bu ancha qulay chunki bu komponentni ishlatishni soddalashtiradi va xavfsizoq bo'aldi. Keyingi maqolada Vue3 da emit haiqda gaplashamiz. Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. ?