Vue.js 非常适合处理浏览器事件，例如click or 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 and jQuery ping。但只有后者才会出现。
CodePen http://codepen.io/vbarbarosh/pen/GZmKoy?editors=1010
Vue有自己的内部自定义事件系统 http://vuejs.org/guide/components.html#Custom-Events，您应该使用它来代替 jQuery / 本机 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
-
不能用v-on:custom-event-name在模板中（仅用于组件）。相反，将事件方法添加到events::
事件：{
ping: 函数() {....}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
