Vue.js

Question

'daki özel olayı dinleyin Vue.js, click veya mousedown gibi tarayıcı olaylarıyla harika çalışır. Ama özel etkinliklerle hiç çalışmıyor. İşte kod:

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> 

JavaScript:

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'); 
     }); 
    } 
}); 

Ben Vue ping ve jQuery ping ile uyarı bekliyoruz. Ama sadece daha sonra açılır. İşte

CodePen

Answer 1

o vanilya JS geçerli:

HTML:

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

JS:

(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); 
    } 
    }); 

})(); 

kalem: http://codepen.io/anon/pen/wGdvaV?editors=1010#0

Answer 2

Vue vardır bunun yerine jQuery/yerli DOM olayları kullanması gereken, kendi iç system for custom events var:

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 
} 

Düzenleme: $ sevk ebeveyn-çocuk iletişimi içindir, aynı comonent içinden özel bir olayı tetiklemek istediğiniz gibi görünüyor. Bu durumda, basitçe bir yöntemi çağırırsınız.

hala aynı bileşenlerin içinde özel bir etkinliğe dinlemek isterseniz,:

1. $ kullanmak istiyorum yayarlar

2. (yani bileşenler üzerinde kullanılmak üzere sadece var) şablonda v-on:custom-event-name kullanmak cannnot .

   olaylar:: { ping: function() {....} } Bir dom etkinliklerle vue-bileşenleri karıştırmak için kaçınmalıdır

Answer 3

Aksine, events: etkinlik yöntemi eklemek İlgili olanlar farklı bir soyutlama katmanı çünkü. bunu yine yapabilir isterseniz

Neyse, sana özel bir tetiklemek sonra vue bileşenli örneği içinde this.el önbelleğe veya bu

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

gibi bilgisayarlı-mülk aracılığıyla götürün Ve gerektiğini düşünüyorum jQuery olayları this.jqueryEl.trigger('ping').

Öğenin bağlanmalarını güncel tutmaya özen gösteriniz! Örneğin dinamik jQuery olayları bağlayabilir (ve ayrıca bileşen yok üzerinde unbind!) Böyle:

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

Ve yanıtı bir ping olayı istiyorum bir öğeye niteliğini [data-jquery="ping"] eklemeyi unutmayın.

Bu bilginin beklenen sonucu elde etmenize yardımcı olmasını umarım.