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提醒.但只有后来弹出.
解决方法
Vue有自己的内部
system for custom events,您应该使用它而不是jQuery / native 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
}
编辑：$dispatch用于父子通信,您似乎想要从同一个组件中触发自定义事件.在这种情况下,您可以简单地调用方法.
如果您仍想在同一组件中收听自定义事件,则：
>想要使用$emit
> cannnot使用v-on：模板中的custom-event-name(仅用于组件).而是将事件方法添加到events ::
事件：{ping：function(){….}}
