Vue $emit()

Keyingi harakatlarimizning maqsadi oziq-ovqat mahsulotining “sevimli” maqomiga ega bo‘lish, o‘zgarish hozirda sodir bo‘layotgan FoodItem.vue bola komponentida emas, balki ota-ona App.vue da o‘zgartirilishidir.

Sevimli holatni FoodItem.vue o‘rniga App.vue-da o‘zgartirishning sababi shundaki, App.vue sevimli status birinchi navbatda saqlanadi, shuning uchun uni yangilash kerak. Kattaroq loyihada ma’lumotlar biz App.vue’da bog‘langan ma’lumotlar bazasidan olinishi mumkin va biz ma’lumotlar bazasiga o‘zgartirish kiritish uchun komponentda sodir bo‘layotgan o‘zgarishlarni xohlaymiz, shuning uchun biz ota-onaga bola komponentidan qayta aloqa qilishimiz kerak.

Maxsus hodisani chiqarish

Komponentdan ota komponentga ma’lumot yuborish zarurati bor va buning uchun o‘rnatilgan $emit() metodidan foydalanamiz.

Bizda allaqachon FoodItem.vue komponentida toggleFavorite usuli mavjud bo‘lib, u o‘zgartirish tugmasi bosilganda ishlaydi. Keling, mavjud qatorni olib tashlaymiz va "toggle-favorite" maxsus hodisamizni chiqarish uchun qator qo‘shamiz:

methods: {
  toggleFavorite() {
    this.foodIsFavorite = !this.foodIsFavorite;
    this.$emit('toggle-Favorite');
  }
}

Biz maxsus tadbirimiz nomini tanlashimiz mumkin, ammo emitatsiya hodisalari uchun kabob qutisidan foydalanish odatiy holdir.

Emissiya hodisasini oling

Maxsus emissiya hodisasi "toggle-favorite" endi FoodItem.vue komponentidan chiqariladi, lekin biz voqeani App.vue ota-onasida tinglashimiz va voqea sodir bo‘lganini ko‘rishimiz uchun biror narsa qiladigan usulni chaqirishimiz kerak.

Biz voqeani v-on o‘rniga @ stenografiyasi bilan tinglaymiz: komponent yaratilgan App.vue da:

<food-item
  v-for="x in foods"
  :key="x.name"
  :food-name="x.name"
  :food-desc="x.desc"
  :is-favorite="x.favorite"
  @toggle-favorite="receiveEmit"
/>

methods: {
  receiveEmit() {
    alert('Hello World!');
  }
}

Ota-onada oziq-ovqat mahsulotining "sevimli" holatini o‘zgartiring

Endi bizda bola komponentidan "Sevimli" tugmasi bosilganda App.vue ga xabar beradigan hodisa (event) mavjud.

Biz “Sevimli” tugmasi bosilganda, App.vue’dagi “ovqatlar” massividagi “sevimli” xususiyatini to‘g‘ri oziq-ovqat mahsuloti uchun o‘zgartirmoqchimiz. Buning uchun biz oziq-ovqat mahsuloti nomini FoodItem.vue dan App.vue saytiga yuboramiz, chunki bu har bir oziq-ovqat mahsuloti uchun noyobdir:

methods: {
  toggleFavorite() {
    this.$emit('toggle-favorite', this.foodName);
  }
}

Endi biz App.vue’da oziq-ovqat mahsuloti nomini “sevimli o‘zgartirish” hodisasi sodir bo‘lganda chaqiriladigan usulga argument sifatida olishimiz mumkin, masalan:

methods: {
  receiveEmit(foodId) {  
    alert( 'You clicked: ' + foodId );
  }
}

Endi biz qaysi oziq-ovqat mahsuloti bosilganini bilganimizdan so‘ng, "oziq-ovqatlar" massividagi to‘g‘ri oziq-ovqat mahsuloti uchun "sevimli" holatini yangilashimiz mumkin:

methods: {
  receiveEmit(foodId) {
    const foundFood = this.foods.find(
      food => food.name === foodId
    );
    foundFood.favorite = !foundFood.favorite;
  }
}

"Oziq-ovqatlar" massividagi to‘g‘ri taom endi "sevimli" holatini yangilaydi. Qolgan yagona narsa - sevimli taomni ko‘rsatadigan rasmni yangilash.

Taom komponentlari allaqachon “foods” massividagi “favorite” holati bilan yaratilgani va App.vue’dan “is-favorite” prop’i sifatida yuborilgani sababli, tasvirni yangilash uchun FoodItem.vue faylidagi <img> elementining v-show direktivasida shu “isFavorite” prop’iga murojaat qilishimiz kifoya:

<img src="/img_quality.svg" v-show="isFavorite">

FoodItem.vue saytidagi "foodIsFavorite" ma’lumotlar xususiyatini ham o‘chirib tashlashimiz mumkin, chunki u endi ishlatilmaydi.

"Emissiya" varianti

FoodItem.vue komponentida prop’larni e’lon qilganimiz kabi, Vue "emits" opsiyasidan foydalanib komponent nimalarni emit qilishini ham hujjatlashtirishimiz mumkin.

Prop’lar komponentda e’lon qilinishi shart, emit’larni esa hujjatlashtirish shunchaki tavsiya etiladi.

FoodItem.vue komponentida emissiyamizni shunday hujjatlashimiz mumkin:

<script>
export default {  
  props: ['foodName','foodDesc','isFavorite'],
  emits: ['toggle-favorite'],
  methods: {
    toggleFavorite() {
      this.$emit('toggle-favorite', this.foodName);
    }
  }
};
</script>

Emissiyalar hujjatlashtirilganda komponentdan boshqalardan foydalanish osonroq bo‘ladi.

Props are used to send data 
from the parent element to the child component, 
and  is used to to pass information 
from the child component to the parent.