Vue में इवेंट एमिशन
जैसा कि आप पहले से ही जानते हैं, डेटा पैरेंट कंपोनेंट्स से चाइल्ड कंपोनेंट्स की ओर प्रवाहित होता है। आइए अब देखते हैं कि चाइल्ड कंपोनेंट्स पैरेंट कंपोनेंट्स के साथ कैसे संचार कर सकते हैं। यह इवेंट्स एमिट करके किया जाता है। आइए व्यवहार में देखते हैं।
मान लीजिए कि पैरेंट कंपोनेंट में कुछ मेथड है:
methods: {
func() {
alert('xxx');
}
}
आइए इस मेथड को पैरामीटर के रूप में चाइल्ड कंपोनेंट में पास करें:
<template>
<User @show="func" />
</template>
emits कॉन्फ़िगरेशन में
एमिट होने वाले इवेंट को परिभाषित करें:
export default {
emits: ['show'],
data() {
return {
}
}
}
आइए अब चाइल्ड कंपोनेंट में एक बटन बनाएं, जो उस पर क्लिक को हैंडल करेगा:
<template>
<button @click="handle">btn</button>
</template>
क्लिक हैंडलर बनाएं:
methods: {
handle() {
}
}
आइए अब क्लिक हैंडलर में
पैरेंट फ़ंक्शन को कॉल करवाएं।
इसके लिए $emit फ़ंक्शन का उपयोग करके
एक इवेंट एमिट करें,
इसके पैरामीटर के रूप में एमिट किए जाने वाले इवेंट का नाम निर्दिष्ट करें:
methods: {
handle() {
this.$emit('show');
}
}
चाइल्ड कंपोनेंट में दो फ़ंक्शन पास करें। चाइल्ड कंपोनेंट में दो बटन बनाएं, प्रत्येक बटन पास की गई फ़ंक्शन्स में से एक को कॉल करे।
