$emit()

Misol

Tugma bosilganda ota komponentga maxsus hodisa yuborish uchun $emit() metodidan foydalanish.

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Click the button to trigger the custom event up to the parent component using the $emit() method.</p>
    <button v-on:click="this.$emit('custom-event')">Trigger</button>
  </div>
</template>

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

O‘rnatilgan $emit() metodi yuqoriga, ota komponentga xabar uzatish uchun ishlatiladigan maxsus hodisani (event) ishga tushiradi.

Argument	Tavsif
Maxsus hodisa nomi	Standart. Birinchi argument — $emit() metodi bilan ishga tushiriladigan maxsus hodisaning nomi.
Qo‘shimcha argumentlar	Ixtiyoriy. Maxsus hodisa (event) bilan birga bir yoki bir nechta argument ma’lumotlar (payload) sifatida yuborilishi mumkin. (Quyidagi 1- va 2-misollarga qarang.)

emits opsiyasi komponent qaysi hodisalarni emit qilishini hujjatlashtirish uchun ishlatilishi mumkin. emits opsiyasidan foydalanish kodning o‘qilishini yaxshilaydi, lekin majburiy emas. (Quyidagi 3-misolga qarang.)

Props esa teskari yo‘nalishda ma’lumot uzatish uchun ishlatiladi: ota komponentdan pastga, bola komponentga. Props haqida darslikda batafsil o‘qing.

Ko‘proq misollar

1-misol

"message-sent" maxsus hodisasi orqali ota komponentga xabar yuborish uchun $emit() metodidan foydalanish.

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Write something, and send the message up to the parent component using the $emit() method.</p>
    <input type="text" v-model="message" placeholder="write something..">
    <button v-on:click="send">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null
    }
  },
  methods: {
    send() {
      this.$emit('message-sent',this.message);
    }
  }
}
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
input {
  display: block;
  margin-bottom: 15px;
}
</style>

Misolni ishga tushirish »

2-misol

Ota komponentga mahsulot nomi va reytingini yuborish uchun $emit() metodidan foydalanish.

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Rate a product:</p>
    <input type="text" v-model="productName" placeholder="Product name.." ref="inpName">
    <input type="number" v-model="productRating" placeholder="Rating 1 to 10..">
    <button v-on:click="send">Register</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: null,
      productRating: null
    }
  },
  methods: {
    send() {
      this.$emit('message-sent',this.productName,this.productRating);
      this.productName = null;
      this.productRating = null;
      this.$refs.inpName.focus();
    }
  },
  mounted() {
    this.$refs.inpName.focus();
  }
}
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
input {
  display: block;
  margin-bottom: 15px;
}
</style>

Misolni ishga tushirish »

3-misol

Komponent $emit() metodi bilan qaysi hodisalarni emit qilishini hujjatlashtirish uchun emits opsiyasidan foydalanish. Bu majburiy emas, lekin kodning o‘qilishini yaxshilaydi.

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Click the button to trigger the custom event up to the parent component using the $emit() method.</p>
    <button v-on:click="this.$emit('custom-event')">Trigger</button>
  </div>
</template>

<script>
export default {
  emits: ['custom-event']
}
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
</style>

Misolni ishga tushirish »

Tegishli sahifalar

Vue darsligi: Vue $emit() metodi

Vue darsligi: Vue props

Vue darsligi: Vue hodisalari

Vue darsligi: Vue v-on direktivasi

Vue darsligi: Scoped uslublar

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish