Vue Provide/Inject

Vue-da Provide/Inject bir komponentdan boshqa komponentlarga, ayniqsa yirik loyihalarda ma’lumotlarni taqdim etish uchun ishlatiladi.

Ta’minlash boshqa komponentlar uchun ma’lumotlarni taqdim etadi.

Inject taqdim etilgan ma’lumotlarni olish uchun ishlatiladi.

Provide/Inject - bu props yordamida ma’lumotlarni uzatishga alternativa sifatida ma’lumotlarni almashish usuli.

Ta’minlash / AOK qilish

Komponentlar ichida komponentlar joylashgan yirik loyihada "App.vue" dan quyi komponentga ma’lumot uzatish uchun prop’lardan foydalanish qiyin bo‘lishi mumkin, chunki bunda ma’lumot o‘tadigan har bir komponentda prop’larni aniqlash talab qilinadi.

Agar biz props o‘rniga provide/inject dan foydalansak, biz faqat taqdim etilgan ma’lumotlarni taqdim etishimiz kerak va biz faqat kiritilgan ma’lumotni u kiritilgan joyda aniqlashimiz kerak.

Ma’lumotlarni taqdim etish

Biz boshqa komponentlar uchun ma’lumotlarni taqdim qilish uchun "ta’minlash" konfiguratsiyasi opsiyasidan foydalanamiz:

App.vue:

<template>
  <h1>Food</h1>
  <div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
  <div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
  <div id="divComp">
    <component :is="activeComp"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeComp: 'food-about',
      foods: [
        { name: 'Pizza', imgUrl: '/img_pizza.svg' },
        { name: 'Apple', imgUrl: '/img_apple.svg' },
        { name: 'Cake', imgUrl: '/img_cake.svg' },
        { name: 'Fish', imgUrl: '/img_fish.svg' },
        { name: 'Rice', imgUrl: '/img_rice.svg' }
      ]
    }
  },
  provide() {
    return {
      foods: this.foods
    }
  }
}
</script>

Yuqoridagi kodda "oziq-ovqat" massivi endi loyihangizning boshqa komponentlariga kiritilishi uchun taqdim etilgan.

Ma’lumotlarni kiritish

Endi "Oziq-ovqatlar" massivi "App.vue" da "provide" orqali taqdim etilgan bo‘lsa, biz uni "FoodKinds" komponentiga kiritishimiz mumkin.

"FoodKinds" komponentiga kiritilgan "oziq-ovqat" ma’lumotlari bilan biz App.vue ma’lumotlaridan "FoodKinds" komponentida turli xil ovqatlarni ko‘rsatish uchun foydalanishimiz mumkin:

Misol

FoodKinds.vue:

<template>
    <h2>Different Kinds of Food</h2>
    <p><mark>In this application, food data is provided in "App.vue", and injected in the "FoodKinds.vue" component so that it can be shown here:</mark></p>
    <div v-for="x in foods">
        <img :src="x.imgUrl">
        <p class="pName">{{ x.name }}</p>
    </div>
</template>

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

<style scoped>
    div {
        margin: 10px;
        padding: 10px;
        display: inline-block;
        width: 80px;
        background-color: #28e49f47;
        border-radius: 10px;
    }
    .pName {
        text-align: center;
    }
    img {
        width: 100%;
    }
</style>

Misolni ishga tushirish »

Vue mashqlari

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish