Javascript 在Vue.js中侦听自定义事件

Vue.js非常适用于浏览器事件，例如

单击

或

鼠标向下

。但完全不适用于自定义事件。代码如下：

HTML:

我希望使用

Vue ping

和

jQuery ping

发出警报。但只有后者会弹出

---

这里是香草JS：

HTML:

pen:

Vue有自己的内部事件，您应该使用它来代替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
}

Edit:$dispatch用于父子通信，您似乎希望从同一个组件内触发自定义事件。在这种情况下，您可以只调用一个方法

如果仍要侦听同一组件内的自定义事件，请执行以下操作：

想要使用$emit吗

无法在模板中使用

v-on:custom event name

（仅用于组件）。而是将事件方法添加到

事件：

：

活动：{ ping:function（）{…} }

---

您应该避免混合使用dom事件和与vue组件相关的事件，因为它是不同的抽象层

无论如何，如果您仍然想这样做，我认为您需要将this.el缓存在vue组件实例中，或者通过类似这样的计算属性获取它

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

然后通过

this.jqueryl.trigger（'ping'）

触发自定义jQuery事件

请确保正确处理并保持元素的绑定最新！ 例如，您可以动态绑定jQuery事件（也可以在组件销毁时解除绑定！），如下所示：

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

不要忘记将属性

[data jquery=“ping”]

添加到要响应ping事件的元素中

---

希望这些信息能帮助您达到预期的效果。

代码中的问题在哪里？@John

ping

方法（其中

alert（'Vue ping'）

）不会被调用这是毫无意义的。我使用

jQuery（event.target）.trigger（'ping'）

，因为我不知道谁将处理这个事件。我需要通知父母，他们的后代出了什么事。是的。它不起作用。“此事件系统独立于本机DOM事件，工作方式不同。”我认为它适用于Vue组件之间的通信，而不是DOM节点之间的通信。它如何工作？由于您使用的是Vue.js，我觉得您想要与beweteen组件通信？`为什么要在Vue中的DOM节点之间通信？因为Vue的目标是将业务逻辑与DOM解耦？如果你能提供更多的信息，也许我们可以帮助你将你的用例翻译成“Vue方式”。如果你能修复我提供的源代码，我将不胜感激。问题是：如何在Vue中附加自定义事件处理程序，以便它可以拦截jQuery.trigger.jQuery发出DOM事件的事件。Vue使用自己的事件系统。因此答案是：不能对DOM事件使用

v-on

。您必须将

jQuery.on（）

与回调一起使用，在

ready（）

中进行设置，就像您已经演示的那样。根据用例的不同，可以将其提取到自定义指令中（请参阅文档）。那么，如何使用内部vue自定义事件系统侦听嵌入svg中的svg事件呢？

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

})();

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
}

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

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