Fatal编程技术网
  • javascript/
  • Javascript 激发自定义事件，在Vue实例上检测。

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

javascript vue.js

Javascript 激发自定义事件，在Vue实例上检测。,javascript,vue.js,Javascript,Vue.js,我目前正在我的网站上集成多个Vue实例，无法使整个网站成为Vue实例并使用组件，因为存在冲突可能性和其他问题 例如： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scal

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


文件
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam vitae sem eget tortor accumsan Pellentsque ac commodo quam。效率、非车辆性、自由-奥古斯都-效率、非莫利斯-纳姆-多洛。里奥迪亚姆库拉比图尔，阿利奎姆ac nisl in，埃利芬德精英。Praesent euismod dapibus nisi ac semper。多内克·马萨·莱克特，莫利斯·欧努克，前庭和三叉戟。拉齐尼亚·法雷特拉的尊贵莫比。自由之神马蒂斯

新Vue({
el:“#vueOne”，
数据：{
计数：0
}
});
新Vue({
el:#vueTwo"，
数据：{
计数：0
}
});
有没有办法在Vanilla JS中触发自定义事件并让Vue实例检测到这一点

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

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

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

newvue({
el:“#vueOne”，
数据：{
计数：0
},
方法：{
myListener:function（）{
这个.count++；
log（“被调用的侦听器”）；
}
}
});
新Vue({
el:#vueTwo"，
数据：{
计数：0
}
});
setTimeout（函数（）{
document.querySelector（“vueOne”）.dispatchEvent（新CustomEvent（“我的事件”））；
},2000);


{{count}}
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam vitae sem eget tortor accumsan Pellentsque ac commodo quam。效率、非车辆性、自由-奥古斯都-效率、非莫利斯-纳姆-多洛。利奥迪亚姆酒店
我要进去了，我要走了。Praesent euismod dapibus nisi ac semper。多内克·马萨·莱克特，莫利斯·欧努克，前庭和三叉戟。拉齐尼亚·法雷特拉的尊贵莫比。自由之神马蒂斯


我使用相同的逻辑。。我仅为消息传递创建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实例，因此负载非常小。您可以添加任意数量的事件侦听器。。您可以向不同的侦听器发送各种消息，也可以为同一消息创建多个侦听器。
您的目标是什么？请说明这是否适用于vue 3？

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