emits
Misol
Komponentdan qaysi maxsus hodisalar emit qilinishini e’lon qilish uchun emits opsiyasidan foydalanish.
export default {
emits: ['custom-event'],
methods: {
notifyParent() {
this.$emit('custom-event','Hello! ')
}
}
}
Quyida ko‘proq misollarni ko‘ring
Ta’rif va qo‘llanilishi
emits opsiyasi komponent qanday maxsus hodisalarni emit qilishini hujjatlashtirish uchun ishlatiladi.
emits opsiyasi majburiy emas, ya’ni komponent hodisalarni emits opsiyasi ichida belgilamasdan ham emit qila oladi.
emits opsiyasi majburiy bo‘lmasa-da, boshqa dasturchilar komponent nimalarni emit qilishini oson ko‘ra olishlari uchun uni yozish baribir tavsiya etiladi.
Agar emits opsiyasi massiv sifatida berilsa, massiv faqat string ko‘rinishidagi emit nomlaridan iborat bo‘ladi. (Yuqoridagi misolga qarang.)
emits opsiyasi obyekt sifatida berilganda, xususiyat nomi emit nomi bo‘ladi, qiymati esa validator funksiyasi (agar u bo‘lsa) yoki emitda validator funksiyasi bo‘lmasa "null" bo‘ladi. (Quyidagi misolga qarang.)
Ko‘proq misollar
Misol
Ota komponent taom tavsifini bermaganda standart tavsif ko‘rsatilishi uchun prop’larni opsiyalarga ega obyektlar sifatida ishlatish.
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>
Tegishli sahifalar
Vue darsligi: Vue $emit() metodi
Vue darsligi: Vue props
Vue ma’lumotnomasi: Vue $props obyekti
Vue ma’lumotnomasi: Vue $emit() metodi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!