Vue.js
आयोजन

घटनाक्रम वाक्य रचना

एक घटना भेजने के लिए: vm.$emit('new-message');

किसी घटना को पकड़ने के लिए: vm.$on('new-message');

: नीचे सभी घटकों के लिए एक घटना भेजने के लिए vm.$broadcast('new-message');

: अप सभी घटकों के लिए एक घटना भेजने के लिए vm.$dispatch('new-message');

नोट: $broadcast और $dispatch Vue2 में पदावनत किए गए हैं। ( देखें Vue2 फीचर्स )

मुझे घटनाओं का उपयोग कब करना चाहिए?

निम्न चित्र दिखाता है कि घटक संचार को कैसे काम करना चाहिए। यह चित्र ईवान यू (डेवलपर की वीयूजेएस) की प्रगतिशील फ्रेमवर्क स्लाइड्स से आया है।

यह कैसे काम करता है इसका एक उदाहरण है:

डेमो

एचटीएमएल

<script type="x-template" id="message-box">
    <input type="text" v-model="msg" @keyup="$emit('new-message', msg)" />
</script>
 
<message-box :msg="message" @new-message="updateMessage"></message-box>
<div>You typed: {{message}}</div>

जे एस

var messageBox = {
  template: '#message-box',
  props: ['msg']
};
 
new Vue({
  el: 'body',
  data: {
    message: ''
  },
  methods: {
    updateMessage: function(msg) {
      this.message = msg;
    }
  },
  components: {
    'message-box': messageBox
  }
});

ऊपर दिए गए उदाहरण में सुधार किया जा सकता है!

ऊपर दिए गए उदाहरण से पता चलता है कि घटक संचार कैसे काम करता है। लेकिन कस्टम इनपुट घटक के मामले में, टाइप किए गए मान के साथ मूल चर को सिंक्रनाइज़ करने के लिए, हम v-model उपयोग करते हैं।

डेमो १

DEMO Vue2

Vue1 में, आपको <message-box> घटक को भेजे गए प्रोप पर .sync उपयोग करना चाहिए। यह VueJS को माता-पिता के साथ बच्चे के घटक में मूल्य को सिंक्रनाइज़ करने के लिए कहता है।

याद रखें: हर घटक उदाहरण का अपना अलग दायरा होता है।

HTML Vue1

<script type="x-template" id="message-box">
  <input v-model="value" />
</script>

<div id="app">
  <message-box :value.sync="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

Vue2 में, एक विशेष 'input' घटना है जिसे आप $emit कर सकते $emit । इस ईवेंट का उपयोग करने से आप सीधे <message-box> घटक पर एक v-model डाल सकते हैं। उदाहरण निम्नानुसार दिखेगा:

HTML Vue2

<script type="x-template" id="message-box">
  <input :value="value" @input="$emit('input', $event.target.value)" />
</script>

<div id="app">
  <message-box v-model="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

JS Vue 1 & 2

var messageBox = {
  template: '#message-box',
  props: ['value']
};

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {
    'message-box': messageBox
  }
});

ध्यान दें कि इनपुट कितनी तेजी से अपडेट हुआ है।

$ प्रेषण और $ प्रसारण के अपव्यय से कैसे निपटें? (बस इवेंट पैटर्न)

आप महसूस कर सकते हैं कि $emit घटक को scoped है जो ईवेंट को उत्सर्जित कर रहा है। यह एक समस्या है जब आप घटक पेड़ में एक दूसरे से दूर के घटकों के बीच संवाद करना चाहते हैं।

नोट: Vue1 में आप $dispatch या $broadcast उपयोग करते हैं, लेकिन Vue2 में नहीं। कारण यह है कि यह अच्छी तरह से पैमाने पर नहीं है। इसे प्रबंधित करने के लिए एक लोकप्रिय bus पैटर्न है:

डेमो

एचटीएमएल

<script type="x-template" id="sender">
  <button @click="bus.$emit('new-event')">Click me to send an event !</button>
</script>
 
<script type="x-template" id="receiver">
  <div>I received {{numberOfEvents}} event{{numberOfEvents == 1 ? '' : 's'}}</div>
</script>
 
<sender></sender>
<receiver></receiver>

जे एस

var bus = new Vue();
 
var senderComponent = {
  template: '#sender',
  data() {
    return {
      bus: bus
    }
  }
};
 
var receiverComponent = {
  template: '#receiver',
  data() {
    return {
      numberOfEvents: 0
    }
  },
  ready() {
    var self = this;
 
    bus.$on('new-event', function() {
      ++self.numberOfEvents;
    });
  }
};
 
new Vue({
  el: 'body',
  components: {
    'sender': senderComponent,
    'receiver': receiverComponent
  }
});

आपको बस यह समझने की आवश्यकता है कि कोई भी Vue() उदाहरण एक घटना का $emit कर सकता है और ( $on ) पकड़ सकता है। हम सिर्फ एक वैश्विक Vue उदाहरण कॉल bus घोषणा करते हैं और फिर इस चर के साथ कोई भी घटक इससे घटनाओं को उत्सर्जित और पकड़ सकता है। बस सुनिश्चित करें कि घटक के पास bus चर तक पहुंच है।