props

Misol

Komponent uchun props yaratishda props opsiyasidan foydalanish.

export default {
    props: [
        'foodName',
        'foodDesc'
    ]
};

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring

Ta’rif va qo‘llanilishi

props opsiyasi — ichida barcha props joylashgan massiv (oddiy shakl) yoki obyekt (to‘liq shakl).

props opsiyasi massiv sifatida berilganda (oddiy shakl, yuqoridagi misolga qarang), massiv faqat string ko‘rinishidagi prop nomlaridan iborat bo‘ladi.

props opsiyasi obyekt sifatida berilganda (to‘liq shakl, quyidagi misolga qarang), prop nomlaridan tashqari bir nechta opsiyani aniqlash mumkin:

Opsiya	Tavsif
type	Prop’ning ma’lumot turini belgilang. Mumkin bo‘lgan turlar: String, Number, Boolean, Array, Object, Date, Function yoki Symbol. Agar haqiqatda berilgan prop belgilangan turdan boshqa turda bo‘lsa, Vue ogohlantirish chiqaradi.
default	Standart prop qiymatini belgilang. Agar ota komponent ma’lum bir prop’ni bermasa, standart qiymat ishlatiladi.
required	Prop majburiy yoki majburiy emasligini belgilang. Vue ilovasi ishlab chiqish (development) rejimida ishga tushirilganda, majburiy prop berilmasa, Vue konsolga ogohlantirish chiqaradi.
validator	Maxsus validator funksiyasini aniqlang. Funksiya argument sifatida prop qiymatini oladi va biz prop qachon yaroqli yoki yaroqsiz ekanligi haqida o‘z qoidalarimizni yozishimiz mumkin. false qaytarilsa, ishlab chiqish (development) rejimida ogohlantirish hosil bo‘ladi.

Ko‘proq misollar

Misol

Prop’larni opsiyalarga ega obyektlar sifatida belgilash.

FoodItem.vue:

<template>
	<div>
		<h2>{{ foodName }}</h2>
		<p>{{ foodDesc }}</p>
	</div>
</template>

<script>
export default {
	props: {
		foodName: {
			type: String,
			required: true
		},
		foodDesc: {
			type: String,
			required: false,
			default: 'This is the food description...'
		}
	}
};
</script>

App.vue:

<template>
  <h1>Food</h1>
  <p>Food description is not provided for 'Pizza' and 'Rice', so the default description is used.</p>
  <div id="wrapper">
    <food-item 
      food-name="Apples" 
      food-desc="Apples are a type of fruit that grow on trees."/>
    <food-item 
      food-name="Pizza"/>
    <food-item 
      food-name="Rice"/>
  </div> 
</template>

<style>
  #wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  #wrapper > div {
    border: dashed black 1px;
    flex-basis: 120px;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

Misolni ishga tushirish »

Tegishli sahifalar

Vue darsligi: Vue props

Vue darsligi: Vue $emit() metodi

Vue ma’lumotnomasi: Vue $props obyekti

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish