008. Vue.js da Props tushunchasi

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 <script setup> bilan qanday ishlash haqida batafsil ko’rishimiz mumkin:

1. Props-larni aniqlash: Vue.js da props-larni aniqlash uchun defineProps funksiyasidan foydalaniladi. defineProps obyekti props-larning turlarini va xususiyatlarini belgilash uchun ishlatiladi.

<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>

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).

2. Props-larni ishlatish: defineProps funksiyasi orqali aniqlangan props-larni bevosita <template> ichida yoki <script setup> ichida ishlatish mumkin.

<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>

3. 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 …

<script setup>
const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
  user: {
    type: Object,
    default: () => ({ name: "Johon", age: 30 }),
  },
});
</script>

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. 🫡

🔗 https://t.me/mukhriddinweb