如何从 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 通过在 vue.js 中使用 Jquery 来完成它，但是我在文档中看到 vue.js 不再能够捕获本机事件。有什么解决办法吗？

Answer 1

您可以使用$on 以编程方式监听事件。

Nova.$on('resources-loaded', () => {
    console.log('Cooking with gas');
    // Do jQuery related stuff here.
});

这适用于为 Vue 实例定义的任何常量变量。例如。 Vue.$on 或 app.$on 等

Answer 2

https://jsfiddle.net/wx84na32/2/ 请检查小提琴这是您想要的完整示例。 HTML

<button id="testBtn">Trigger an event</button>
<div id="app">
<div v-show="this.show">
1st Argument of Custom Event <br />
"{{ one }}"
<br />
2nd Argument of Custom Event <br />
"{{ two }}"
<br />
A complete event object below <br />
{{ event }}
</div>
</div>

Javascript / jQuery / Vue

//jQuery

$('#testBtn').on("click", function(event) {
    console.log(this, 'this');
  $(this).trigger("custom", ["1st", "2nd"]);
});

//vue.js


new Vue({
  el: '#app',
    mounted () {

    let _this = this;

    $(document).on("custom", function(event, one, two) {

        console.log(event, 'event');
      console.log(one, 'one');
      console.log(two, 'two');

      _this.event = event;
      _this.one = one;
      _this.two = two;

      _this.show = true;

    });
  },
  data () {
    return {
        show : false,
        event : {},
      one : '',
      two : ''
    }
  }
});

[https://jsfiddle.net/wx84na32/2/]

Answer 3

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 以外的东西添加事件时，您应该自行管理删除它们，尤其是当您将其添加到组件中时。组件被多次创建/销毁，您不希望以多个处理程序结束。

Answer 4

使用 Vue 附加事件侦听器并使用 jQuery 发出事件。