时间戳

首页 > 解决方案 > 触发自定义事件 Vanilla JS，检测 Vue 实例。

javascript - 触发自定义事件 Vanilla JS，检测 Vue 实例。

问题描述

我目前在我的网站上集成了多个 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>

有没有办法可以在 Vanilla JS 中触发自定义事件并让 Vue 实例检测到这一点？

标签： javascriptvue.js

解决方案

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

例如，如果您my-event在其中一个 div 上有一个名为 setup 的事件，例如

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

推荐阅读