Słuchaj niestandardowych wydarzeń w Vue.js

Question

Vue.js świetnie współpracuje z wydarzeniami przeglądarkowymi, takimi jak click lub mousedown. Ale nie działa w ogóle z niestandardowymi zdarzeniami. Oto 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'); 
     }); 
    } 
}); 

Spodziewam alert z Vue ping i jQuery ping. Ale tylko później wyskakuje.

CodePen

Answer 1

Oto ona w waniliowym JS:

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

})(); 

pióro: http://codepen.io/anon/pen/wGdvaV?editors=1010#0

Answer 2

Vue ma swój własny wewnętrzny system for custom events, który należy użyć zamiast jQuery/rodzimych zdarzeń DOM:

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 
} 

Edycja: $ wysyłka jest do komunikacji rodzic-dziecko, wydają się chce wyzwalać zdarzenia niestandardowego w obrębie tej samej comonent. W takim przypadku możesz po prostu wywołać metodę.

Jeśli nadal chcą słuchać niestandardowego zdarzenia wewnątrz tego samego komponentu, należy:

1. chcesz użyć $ emitują

2. cannnot używać v-on:custom-event-name w szablonie (to tylko do stosowania na elementach) . Raczej dodać metodę zdarzeń do events::

   zdarzeń: { ping: function() {....} }

Answer 3

nie należy mieszać zdarzeń DOM i vue-komponenty powiązane, ponieważ są to różne warstwy abstrakcji.

W każdym razie, jeśli nadal chcesz to zrobić, myślę, że trzeba buforować this.el wewnątrz instancji vue-komponent lub wziąć go za pomocą komputerowej-PROPERTY jak ten

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

A potem wywołać zwyczaj Zdarzenia jQuery: this.jqueryEl.trigger('ping').

Oczywiście, aby dbać o zachowanie aktualności wiązania elementu! Na przykład można powiązać zdarzenia jQuery dynamicznie (a także rozpiąć na składniku zniszczyć!) Tak:

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

I nie zapomnij dodać atrybut [data-jquery="ping"] do elementu, który chcieliby Państwo odpowiedzi na zdarzenie ping.

Mam nadzieję, że te informacje pomogą Ci osiągnąć oczekiwany rezultat.