Как поймать событие Jquery из vue.JS

Как поймать событие Jquery из vue.JS

12.09.2017 03:24:52 Просмотров 1 Источник

Сценарий: у меня есть iframe (который размещен в том же домене, но чисто использует только Jquery), и он уже закодирован для запуска некоторых событий с параметрами. И я должен поймать эти события с параметрами в Родительском vue.приложение js.

фрейм:

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

вю.JS

Поймайте это событие как-нибудь из vue.js и установите css-стили div соответственно (установите "абсолютную" позицию). Я сделал это с помощью vue.js перед v2 приходит с помощью Jquery внутри vue.js, но я видел в документах, что vue.js больше не может ловить собственные события. Есть какое-нибудь решение ?

У вопроса есть решение - Посмотреть?

Ответы - Как поймать событие Jquery из vue.JS / How to catch Jquery event from vue.js

Muhammad Adil

12.09.2017 03:27:00

Прикрепите прослушиватель событий с помощью Vue и выделите событие с помощью jQuery.

Является ответом!
Bert

12.09.2017 05:55:19

jQuery использует собственную систему событий. Вы не можете поймать события, испускаемые из jQuery с помощью Vue, вы должны поймать их с помощью 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, вы должны управлять их удалением самостоятельно, особенно если вы добавляете его в компонент. Компоненты создаются/уничтожаются более одного раза, и вы не хотите в конечном итоге иметь несколько обработчиков.

Muhammad Adil

13.09.2017 08:17:40

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

Grant

15.06.2020 07:22:41

Вы можете использовать $on для программного прослушивания события.

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

Это будет работать с любой постоянной переменной, определенной для экземпляра Vue. Напр.. Vue.$on или app.$on и т. д.

Закрыть X