在 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>

脚本：

 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 发出警报。但只有后者弹出。

代码笔

原文由 vbarbarosh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 有自己 的自定义事件内部系统，你应该使用它来代替 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 用于父子通信，您似乎想从同一组件中触发自定义事件。在这种情况下，您可以改为简单地调用一个方法。

如果您仍想在同一组件内收听自定义事件，您：

1. 想使用 $emit

2. 不能在模板中使用 v-on:custom-event-name （只能用于组件）。相反，将事件方法添加到 events: ：

事件：{ ping: function() {….} }

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 4.0 许可协议