Vue में इवेंट एमिशन

जैसा कि आप पहले से ही जानते हैं, डेटा पैरेंट कंपोनेंट्स से चाइल्ड कंपोनेंट्स की ओर प्रवाहित होता है। आइए अब देखते हैं कि चाइल्ड कंपोनेंट्स पैरेंट कंपोनेंट्स के साथ कैसे संचार कर सकते हैं। यह इवेंट्स एमिट करके किया जाता है। आइए व्यवहार में देखते हैं।

मान लीजिए कि पैरेंट कंपोनेंट में कुछ मेथड है:

App.vuemethods: {
  func() {
    alert('xxx');
  }
}

आइए इस मेथड को पैरामीटर के रूप में चाइल्ड कंपोनेंट में पास करें:

App.vue<template>
  <User @show="func" />
</template>

emits कॉन्फ़िगरेशन में एमिट होने वाले इवेंट को परिभाषित करें:

components/User.vueexport default {
  emits: ['show'],
  data() {
    return {
      
    }
  }
}

आइए अब चाइल्ड कंपोनेंट में एक बटन बनाएं, जो उस पर क्लिक को हैंडल करेगा:

components/User.vue<template>
  <button @click="handle">btn</button>
</template>

क्लिक हैंडलर बनाएं:

components/User.vuemethods: {
  handle() {
    
  }
}

आइए अब क्लिक हैंडलर में पैरेंट फ़ंक्शन को कॉल करवाएं। इसके लिए $emit फ़ंक्शन का उपयोग करके एक इवेंट एमिट करें, इसके पैरामीटर के रूप में एमिट किए जाने वाले इवेंट का नाम निर्दिष्ट करें:

components/User.vuemethods: {
  handle() {
    this.$emit('show');
  }
}