代码之家 › 专栏 › 技术社区 › Martyn Ball

激发自定义事件,在Vue实例上检测。

vue.js javascript

Martyn Ball · 技术社区 · 6 年前

我目前正在我的网站上集成多个Vue实例,不能使整个网站的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>

2 回复 | 直到 6 年前

Ernst Reidinga 6 年前

我用同样的逻辑。。我只为消息传递创建一个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->香草和香草->vue公司。

而且因为它是一个仅用于消息的vue实例,所以负载非常小。您可以添加任意数量的事件侦听器。。您可以将所有类型的消息发送到不同的侦听器,或者为同一消息创建多个侦听器。

Patrick Evans 6 年前

例如,如果您有一个名为 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>