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> 

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

私はVue pingとjQuery pingと警告し期待しています。しかし、後の方だけがポップアップします。

CodePen

Answer 1

ここでは、バニラ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); 
    } 
    }); 

})(); 

ペン：http://codepen.io/anon/pen/wGdvaV?editors=1010#0

Answer 2

ヴューました

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内からカスタムイベントをトリガするように見えるされ、それはあなたがjQueryの/ネイティブDOMイベントの代わりに使用すべき、独自の内部system for custom eventsです。その場合、代わりに単にメソッドを呼び出すことができます。

それでも同じコンポーネント内のカスタムイベントを聞きたい場合は、あなた：

1. は$使いたいが発する

2. （つまり、コンポーネント上で使用するだけです）テンプレートでv-on:custom-event-nameを使用cannnot 。

   イベント：{ ピング：関数（）{...}} あなたはDOMイベントとVUE-成分を混合するために避けるべき

Answer 3

むしろ、events:にイベントメソッドを追加それは抽象化の異なるレイヤーなので、関連するものです。あなたがまだあることをしたいならば、私はあなたがVUE-コンポーネントインスタンス内this.elキャッシュまたはこの

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

のように計算され、プロパティを経由してそれを取ると、カスタムをトリガーする必要があると思うとにかく

、 jQueryイベントby this.jqueryEl.trigger('ping')

要素のバインディングを最新の状態に保つのが適切であることを確かめてください！ たとえば、あなたは、動的にjQueryのイベントをバインドすることができ、このような（とも破壊するコンポーネントにバインド解除！）：

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

そして、あなたは、応答のpingイベントをしたい要素に属性[data-jquery="ping"]を追加することを忘れないでください。

この情報は、期待した結果を得るのに役立ちます。