Question

我目前在我的网站上集成了多个pue实例，不能将整个网站作为vue实例并使用组件，因为这可能会导致冲突和其他问题。

例如：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="vueOne"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac commodo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
    <div id="vueTwo"></div>
    <script>
        new Vue({
            el: '#vueOne',
            data: {
                count: 0
            }
        });
        new Vue({
            el: '#vueTwo',
            data: {
                count: 0
            }
        });

    </script>
  </body>
</html>

是否可以在Vanilla JS中触发自定义事件并使Vue实例检测到该事件？

Answer 1

在vue元素/组件上的事件设置是/在常规元素上使用相同类型的事件侦听器设置。因此，您可以获得对已将事件侦听器设置为打开的元素的引用，并使用您的自定义事件调用dispatchEvent。

例如，如果您在一个div上设置了名为my-event的事件，例如

<div id="vueOne" v-on:my-event="myListener">{{count}}</div>

您可以使用querySelector("#vueOne")获取对该元素的引用，然后在其上调用dispatchEvent()

document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );

演示

new Vue({
  el: '#vueOne',
  data: {
    count: 0
  },
  methods:{
    myListener:function(){
      this.count++;
      console.log("listener called");
    }
  }
});
new Vue({
  el: '#vueTwo',
  data: {
    count: 0
  }
});

setTimeout(function(){
  document.querySelector("#vueOne").dispatchEvent( new CustomEvent("my-event") );
},2000);

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="vueOne" v-on:my-event="myListener">{{count}}</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae sem eget tortor accumsan pellentesque ac commodo quam. Fusce efficitur, nisl non vehicula venenatis, libero augue efficitur nisi, non mollis nulla enim nec dolor. Curabitur leo diam, aliquam
  ac nisl in, cursus eleifend elit. Praesent euismod dapibus nisi ac semper. Donec massa lectus, vestibulum ut tristique eget, mollis eu nunc. Morbi dignissim lacinia pharetra. Maecenas consectetur libero sed risus cursus mattis</p>
<div id="vueTwo"></div>

Answer 2

我使用相同的逻辑。.我创建一个vue实例，仅用于消息传递。这样，我可以从非vue调用事件，并在vue和向后使用它们。

window.Event = new class {
  constructor() {
    this.vue = new Vue();
  }
  fire(event, data = null) {
    this.vue.$emit(event, data);
  }
  listen(event, callback) {
    this.vue.$on(event, callback);
  }
}

在组件中，我有一个事件侦听器：

created () {
    Event.listen('notification', function (msg) {
      console.log(msg);
    });
  }

我可以发送这样的消息：

Event.fire('notification', {
    title: 'Hello from notification throug message :)';
});

因为事件类是在窗口上创建的，所以可以从每个组件和每个函数访问它。这是在vue实例之间进行通信的简单方法，vue-> vanilla和vanilla-> vue。

并且由于它只是消息的Vue实例，因此负载很小。您可以根据需要添加任意数量的事件侦听器。可以将各种消息发送到不同的侦听器，或为同一消息创建多个侦听器。

触发自定义事件Vanilla JS，在Vue实例上进行检测。

2 个答案: