vue.js에서 Jquery 이벤트를 포착하는 방법

vue.js에서 Jquery 이벤트를 포착하는 방법

시나리오: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.discloss(vue.discloss)

vue.js에서 어떻게든 이 이벤트를 포착하고 그에 따라 div의 css 스타일을 설정합니다('절대' 위치 설정).v2가 나오기 전에 vue.js 내에서 Jquery를 사용하여 vue.js를 사용했는데 vue.js가 네이티브이벤트를 포착할 수 없게 된 것을 문서에서 확인했습니다.해결방법은?

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

여기 그것이 작동하는 예가 있습니다.

참고: Vue 이외의 것을 사용하여 이벤트를 추가할 경우 이벤트를 직접 제거해야 합니다. 특히 해당 이벤트를 컴포넌트에 추가하는 경우에는 더욱 그러합니다.컴포넌트는 여러 번 생성/파괴되므로 여러 개의 핸들러를 사용할 필요가 없습니다.

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/]

Vue에 이벤트청취자를 연결하고 jQuery를 사용하여 이벤트를 내보냅니다.

사용할 수 있습니다.$on이벤트를 프로그램적으로 들을 수 있게 되어 있습니다.

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

이 기능은 Vue 인스턴스에 대해 정의된 모든 상수 변수에서 작동합니다.예.Vue.$on또는app.$on기타.

언급URL : https://stackoverflow.com/questions/46176331/how-to-catch-jquery-event-from-vue-js