Vue.js

Question

में कस्टम ईवेंट सुनें Vue.js click या mousedown जैसे ब्राउज़र ईवेंट के साथ बढ़िया काम करता है। लेकिन कस्टम घटनाओं के साथ बिल्कुल काम नहीं करते हैं। यहाँ कोड है:

HTML:

<div id="app" style="display: none" v-show="true"> 
    <div v-el:ping v-on:ping="ping"> 
     <div> 
      <button v-on:click="click">Click</button> 
     </div> 
    </div> 
</div> 

जावास्क्रिप्ट:

new Vue({ 
    el: '#app', 
    data: { 
    }, 
    methods: { 
     ping: function (event) { 
      console.log('Vue ping', event); 
      alert('Vue ping'); 
     }, 
     click: function (event) { 
      jQuery(event.target).trigger('ping'); 
     } 
    }, 
    ready: function() { 
     console.log(this.$els); 
     jQuery(this.$els.ping).on('ping', function (event) { 
      console.log('jQuery ping', event); 
      alert('jQuery ping'); 
     }); 
    } 
}); 

मैं Vue ping और jQuery ping साथ चेतावनी की उम्मीद है। लेकिन केवल बाद में पॉप अप।

CodePen

Answer 1

यहाँ यह वेनिला जे एस में है:

HTML:

<div id="app"> 
    <div v-el:ping> 
    <div> 
     <button v-on:click="click">Click</button> 
    </div> 
    </div> 
</div> 

जे एस:

(function() { 

    new Vue({ 
    el: '#app', 
    data: { 
     event: null 
    }, 
    methods: { 
     ping: function(event) { 
     alert('Vue ping'); 
     }, 
     click: function(event) { 
     this.$els.ping.dispatchEvent(this.event); 
     } 
    }, 
    ready: function() { 
     this.event = document.createEvent("HTMLEvents"); 
     this.event.initEvent("ping", true, true); 
     this.$els.ping.addEventListener('ping', this.ping); 
    } 
    }); 

})(); 

कलम: http://codepen.io/anon/pen/wGdvaV?editors=1010#0

Answer 2

Vue है यह स्वयं के आंतरिक system for custom events है, जो आप के बजाय jQuery/देशी डोम घटनाओं के उपयोग करना चाहिए:

click: function (event) { 
    // jQuery(event.target).trigger('ping'); 

    this.$dispatch('ping', event.target) // send event up the parent chain, optionally send along a reference to the element. 

    // or: 
    this.$emit('ping') // trigger event on the current instance 
} 

संपादित करें: $ प्रेषण अभिभावक-बच्चे संचार के लिए है, आप एक ही comonent के भीतर से एक कस्टम ईवेंट ट्रिगर करते हैं लगते हैं। उस स्थिति में, आप बस एक विधि को कॉल कर सकते हैं।

आप अभी भी एक ही घटक के अंदर एक कस्टम घटना को सुनने के लिए चाहते हैं, आप:

1. $ का उपयोग करना चाहते फेंकना

2. टेम्पलेट में v-on:custom-event-name का उपयोग ऐसे ही चल नहीं (कि केवल घटकों पर इस्तेमाल किया जा रहा है) ।

   घटनाओं:: { पिंग: function() {....} }

Answer 3

आप एक डोम घटनाओं और Vue-घटकों का मिश्रण करने से बचना चाहिए बल्कि, events: को घटना विधि जोड़ें संबंधित हैं क्योंकि यह अमूर्तता की एक अलग परत है।

वैसे भी, अगर आप अभी भी है कि क्या करना चाहते हैं, मैं तुम्हें एक Vue घटक उदाहरण के अंदर this.el कैश या इस

{ 
    computed : { 
     jqueryEl(){ return $(this.el) } 
    } 
} 

तरह अभिकलन-संपत्ति के माध्यम से इसे ले और फिर एक कस्टम को गति प्रदान करने की जरूरत है jQuery घटनाओं this.jqueryEl.trigger('ping') द्वारा।

निश्चित रूप से तत्व की बाइंडिंग को अद्यतित रखने का ध्यान रखना सुनिश्चित करें! उदाहरण के लिए आप इस तरह गतिशील jQuery घटनाओं बाध्य कर सकते हैं (और यह भी घटक को नष्ट पर निकल!):

ready : function(){ 
    jQuery('body').on('ping.namespace', '[data-jquery="ping"]', function(){ ... }) 
}, 
destroy : function(){ 
     jQuery('body').off('ping.namespace') 
} 

और भूल जाते हैं एक तत्व है जो आप प्रतिक्रिया एक पिंग घटना चाहते हैं विशेषता [data-jquery="ping"] जोड़ने के लिए नहीं है।

आशा है कि यह जानकारी आपको अपेक्षित परिणाम प्राप्त करने में सहायता करेगी।