javascript - 如何从 vue.js 捕获 Jquery 事件

Question

场景:我有一个 iframe(托管在同一个域中，但仅使用 Jquery)并且它已经被编码为使用参数触发一些事件。而且我必须在父 vue.js 应用程序中使用参数捕获这些事件。

iframe:

$('*').mouseover(function (event) {
  var event = jQuery.Event( "mouseover-highlight" );
  event.top = $(this).offset().top;
  event.left = $(this).offset().left;
  parent.$('body').trigger(event);
});

vue.js

从 vue.js 以某种方式捕获此事件并相应地设置 div 的 css 样式(设置“绝对”位置)。在 v2 出现之前，我通过在 vue.js 中使用 Jquery 使用 vue.js 完成了它，但是我在文档中看到 vue.js 不再能够捕获 native 事件。有什么解决办法吗？

Answer 1

jQuery 使用它自己的事件系统。您无法使用 Vue 捕获从 jQuery 发出的事件，您必须使用 jQuery 捕获它们并从处理程序调用 Vue。

new Vue({
  el: "#app",
  data:{
    iframeSource: $("template").html()
  },
  methods:{
    onMouseover(event){
      alert(`Top: ${event.top}, Left: ${event.left}`)
    }
  },
  mounted(){
    $("body").on("mouseover-highlight", this.onMouseover)    
  },
  beforeDestroy(){
    $("body").off("mouseover-hightlight", this.onMouseover)
  }
})

这里是 an example它的工作。

注意:当使用 Vue 以外的东西添加事件时，你应该自己管理删除它们，特别是如果你将它添加到组件中。组件被多次创建/销毁，您不希望以多个处理程序结束。