Vue props

Komponentga ma’lumotlarni uzatish

Oldingi sahifadagi barcha uchta komponentda "Olma" deb yozilgan misolni eslaysizmi? Endi props yordamida biz ma’lumotlarni komponentlarimizga turli xil tarkib berish va ularni boshqacha ko‘rinishga keltirishimiz mumkin.

Keling, "Olma", "Pitsa" va "Guruch" ni ko‘rsatish uchun oddiy sahifa yarataylik.

App.vue asosiy ilova faylida <food-item/> komponent teglari orqali prop uzatish uchun o‘zimizning “food-name” atributimizni yaratamiz:

<template>
  <h1>Food</h1>
  <food-item food-name="Apples"/>
  <food-item food-name="Pizza"/>
  <food-item food-name="Rice"/>
</template>

<script></script>

<style>
  #app > div {
    border: dashed black 1px;
    display: inline-block;
    width: 120px;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

Komponent ichidagi ma’lumotlarni qabul qilish

App.vue’dan “food-item” atributi orqali yuborilgan ma’lumotlarni qabul qilish uchun ushbu yangi “props” konfiguratsiya opsiyasidan foydalanamiz. Qabul qilinadigan atributlarni sanab o‘tamiz, shunda *.vue komponent faylimiz ular haqida biladi va endi prop’larni xuddi ma’lumotlar xususiyati kabi istalgan joyda ishlatishimiz mumkin.

<script>
  export default {
    props: [
      'foodName'
    ]
  }
</script>

Nihoyat, "Olma", "Pitsa" va "Guruch" uchun <div> elementlari bilan bizning misolimiz quyidagicha ko‘rinadi:

<template>
  <h1>Food</h1>
  <food-item food-name="Apples"/>
  <food-item food-name="Pizza"/>
  <food-item food-name="Rice"/>
</template>

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

<script>
  export default {
    props: [
      'foodName'
    ]
  }
</script>

<style></style>

Tez orada biz turli xil ma’lumotlar turlarini komponentlarga prop atributlari sifatida qanday o‘tkazishni ko‘ramiz, lekin buni amalga oshirishdan oldin, keling, har bir oziq-ovqat turining tavsifi bilan kodimizni kengaytiramiz va oziq-ovqat <div> elementlarini Flexbox o‘ramiga joylashtiramiz.

<template>
  <h1>Food</h1>
  <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-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."/>
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat."/>
  </div>
</template>

<script></script>

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

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

<script>
  export default {
    props: [
      'foodName',
      'foodDesc'
    ]
  }
</script>

<style></style>

Mantiqiy props

Turli ma’lumot turlaridagi prop’larni uzatish orqali turli funksionallikka erishishimiz mumkin, shuningdek, App.vue’dan komponentlar yaratilganda atributlar qanday berilishi haqida qoidalar belgilashimiz mumkin.

Keling, yangi "isFavorite" prop’ini qo‘shamiz. Bu true yoki false qiymatiga ega Boolean prop bo‘lishi kerak, shunda taom sevimli deb hisoblansa, uni to‘g‘ridan-to‘g‘ri v-show bilan ishlatib, sevimli belgisi (shtamp) bo‘lgan <img> tegini ko‘rsatishimiz mumkin.

Stringdan farqli ma’lumot turiga ega prop’larni uzatish uchun uzatmoqchi bo‘lgan atributimiz oldiga v-bind: yozishimiz kerak.

Boolean “isFavorite” prop’ini App.vue’dan “is-favorite” atributi sifatida shunday uzatamiz:

<template>
  <h1>Food</h1>
  <p>My favorite food has a diploma image attached to it.</p>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees."
      v-bind:is-favorite="true"/>
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."
      v-bind:is-favorite="false"/>
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat."
      v-bind:is-favorite="false"/>
  </div>
</template>

Boolean "isFavorite" prop’ini FoodItem.vue ichida qabul qilamiz va agar taom sevimli deb hisoblansa, sevimli belgisini (shtamp) ko‘rsatamiz:

<template>
  <div>
    <h2>
      {{ foodName }}
      <img src="/img_quality.svg" v-show="isFavorite">
    </h2>
    <p>{{ foodDesc }}</p>
  </div>
</template>

<script>
  export default {
      props: ['foodName','foodDesc','isFavorite']
  }
</script>

<style>
  img {
    height: 1.5em;
    float: right;
  }
</style>

Tasvirlar: Yuqoridagi misoldagi rasmni kompyuteringizdagi loyihada mahalliy sifatida ishlashi uchun yuqoridagi misolni oching, rasmni o‘ng tugmasini bosing, “Rasmni boshqa saqlash...” bandini tanlang va uni loyihangizdagi “ommaviy” papkaga saqlang.

Props interfeysi

Yuqoridagi misolda FoodItem.vue ichidagi kodga qarab, "isFavorite" propini qabul qilishimizni ham, uning boolean qiymat ekanligini ham aniq bilib bo‘lmaydi. Bunda yordam berishi uchun qabul qilinadigan prop’larning ma’lumot turini aniqlashimiz, prop’larni majburiy qilib belgilashimiz va hatto qabul qilinadigan prop’larni tekshirish uchun validatsiya funksiyalarini yaratishimiz mumkin.

Qabul qilinadigan prop’larni aniqlab qo‘yish, agar jamoada ishlasangiz, boshqalar uchun hujjat (dokumentatsiya) vazifasini bajaradi, shuningdek biz belgilagan qoidalar buzilganda konsolda ogohlantirishlar beradi.

Obyekt sifatida props

FoodItem.vue faylida prop’larni massivda qanday aniqlaganimizni namuna sifatida qolishi uchun izohga aylantiramiz va buning o‘rniga prop’larni obyektda aniqlaymiz. Shuningdek, prop nomidan tashqari har bir propning ma’lumot turini ham aniqlashimiz mumkin, masalan:

<script>
  export default {
    // props: ['foodName','foodDesc','isFavorite']
    props: {
      foodName: String,
      foodDesc: String,
      isFavorite: Boolean
    }
  }
</script>

Shu tarzda belgilangan props bilan boshqa odamlar FoodItem.vue ichiga qarashlari va komponent nima kutayotganini osongina ko‘rishlari mumkin.

Agar komponent asosiy elementdan yaratilgan bo‘lsa (bizning holimizda App.vue) va noto‘g‘ri ma’lumotlar turiga ega bo‘lgan prop berilsa, konsolda siz quyidagi kabi ogohlantirish olasiz:

Bunday ogohlantirishlar o‘zimizga va boshqalarga komponent qanday foydalanilmasligini bilish va xatoni tuzatishimiz uchun nima noto‘g‘ri ekanligini aytib berish uchun foydalidir.

Kerakli props

Vue-ga prop majburiy ekanligini bildirish uchun propni obyekt sifatida aniqlashimiz kerak. Keling, "foodName" propini quyidagicha majburiy qilaylik:

<script>
  export default {
    // props: ['foodName','foodDesc','isFavorite']
    props: {
      foodName: {
        type: String,
        required: true
      },
      foodDesc: String,
      isFavorite: Boolean
    }
  }
</script>

Agar komponent asosiy elementdan yaratilgan bo‘lsa (bizning holimizda App.vue) va kerakli prop aniqlanmagan bo‘lsa, konsolda siz quyidagi kabi ogohlantirish olasiz:

Bunday ogohlantirishlar o‘zimizga va boshqalarga komponent qanday foydalanilmasligini bilish va xatoni tuzatishimiz uchun nima noto‘g‘ri ekanligini aytib berish uchun foydalidir.

Standart qiymat

Biz prop uchun standart qiymatni o‘rnatishimiz mumkin.

Keling, 'FoodItem' komponentida 'foodDesc' prop uchun standart qiymat yarataylik va keyin 'foodDesc' propini aniqlamasdan guruch uchun shunday element yarataylik:

<template>
  <h1>Food</h1>
  <p>My favorite food has a diploma image attached to it.</p>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees."
      v-bind:is-favorite="true"/>
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."
      v-bind:is-favorite="false"/>
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat." 
      v-bind:is-favorite="false"/>
  </div>
</template>

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

Props Validator funksiyasi

Shuningdek, biz prop qiymatining haqiqiy yoki yo‘qligini hal qiladigan validator funksiyasini aniqlashimiz mumkin.

Bunday validator funksiyalari rost yoki yolg‘onni qaytarishi kerak. Tasdiqlovchi noto‘g‘ri qaytarsa, bu prop qiymati yaroqsiz degan ma’noni anglatadi. Sahifamizni ishlab chiquvchi rejimida ishga tushirganimizda noto‘g‘ri prop qiymati brauzer konsolida ogohlantirish hosil qiladi va ogohlantirish komponentlardan maqsadga muvofiq foydalanilganligiga ishonch hosil qilish uchun foydali maslahatdir.

Aytaylik, biz oziq-ovqat tavsifi ma’lum uzunlikda, 20 dan 50 tagacha belgi bo‘lishini xohlaymiz. Taqdim etilgan oziq-ovqat tavsifi yaroqli uzunlikka ega ekanligiga ishonch hosil qilish uchun biz validator funksiyasini qo‘shishimiz mumkin.

<script>
  export default {
    props: {
      foodName: {
        type: String,
        required: true
      },
      foodDesc: {
        type: String,
        required: false,
        default: 'This is the default description.',
        validator: function(value) {
          if( 20<value.length && value.length<50 ) {
            return true;
          }
          else {
            return false;
          }
        }
      },
      isFavorite: {
        type: Boolean,
        required: false,
        default: false
      }
    }
  }
</script>

Eslatma: Agar siz mahalliy loyihangizga yuqoridagi validator kodini qo‘shsangiz, ishlab natija rejimida ogohlantirish olasiz, chunki pizza uchun taom tavsifi 65 belgidan iborat bo‘lib, bu validator funksiyasi ruxsat berganidan 15 belgiga uzunroqdir.

Proplarni o‘zgartirish

Asosiy elementda komponent yaratilganda, biz bola elementda olingan prop qiymatini o‘zgartirishga ruxsat berilmaydi. Shunday qilib, FoodItem.vue ichida biz App.vue’dan olgan "isFavorite" prop qiymatini o‘zgartira olmaymiz. Tayanch ota-onadan faqat o‘qish uchun mo‘ljallangan, bu bizning holatlarimizda App.vue.

Aytaylik, foydalanuvchi tugmani bosish orqali qaysi taom sevimli hisoblanishini o‘zgartira olishini xohlaymiz. Endi "isFavorite" propini o‘zgartirish kerak, lekin buni qila olmaymiz, chunki u faqat o‘qish uchun (read-only).

methods: {
  toggleFavorite() { 
    this.isFavorite = !this.isFavorite;
  }
}

Buni chetlab o‘tish uchun FoodItem.vue ichida propdan foydalanib yangi "foodIsFavorite" ma’lumot qiymatiga boshlang‘ich qiymat berishimiz mumkin, masalan:

data() {
  return { 
    foodIsFavorite: this.isFavorite
  }
}

Va endi biz foydalanuvchi ushbu yangi ma’lumotlar qiymatini almashtirishi uchun metod qo‘shishimiz mumkin:

methods: {
  toggleFavorite() { 
    this.foodIsFavorite = !this.foodIsFavorite;
  }
}

Shuningdek, har bir oziq-ovqat mahsulotiga almashtirish tugmachasini qo‘shishimiz va <img> tegidagi v-show ni yangi “foodIsFavorite” ma’lumotlar xususiyatiga qarab o‘zgartirishimiz kerak. Va misolimizni soddalashtirish uchun biz props deklaratsiyasini shunchaki massivga qisqartiramiz.

<template>
  <div>
    <h2>
      {{ foodName }}
      <img src="/img_quality.svg" v-show="foodIsFavorite">
    </h2>
    <p>{{ foodDesc }}</p>
    <button v-on:click="toggleFavorite">Favorite</button>
  </div>
</template>

<script>
export default {
  props: ['foodName','foodDesc','isFavorite'],
  data() {
    return {
      foodIsFavorite: this.isFavorite
    }
  },
  methods: {
    toggleFavorite() {
      this.foodIsFavorite = !this.foodIsFavorite;
    }
  }
};
</script>

<style>
  img {
    height: 1.5em;
    float: right;
  }
</style>

<script>
  export default {
    : [
      ''
    ]
  }
</script>