如何在 vue js 中监听从“root”发出的事件？

Question

我的应用程序使用 vue.js 并与 vanilla js 进行了一些集成。 在我的 vanilla js 文件中，我创建了一个新的 vue 实例并从那里发出一个名为annotation-click的事件。 我可以在开发工具选项卡中看到此事件。

这是我制作的自定义事件类：

customevent.js

import Vue from 'vue'
export default window.Event = class Event {
  constructor () {
    this.vue = new Vue()
  }

  fire (event, data = null) {
    this.vue.$emit(event, data)
  }

  listen (event, callback) {
    this.vue.$on(event, callback)
  }
}

在我的 vanilla js文件中，我发出这样的事件：

import Event from '../utils/customevent'

var test = new Event()
...
handleClick: (view, pos, event) => {
const { schema } = view.state
const attrs = getMarkAttrs(view.state, schema.marks.annotation)
    if (attrs.href && event.target instanceof HTMLSpanElement) {
        test.fire('notification', {
        title: "annotation-joe"
        })
    }
},
...

该事件是从我的主要 vue.js 应用程序发出的，如下所示：

我正在我的 vue.js 组件中监听事件，但似乎我的监听器没有接收到事件。

如何正确收听<Root>发出的事件？

我的 vue.js 应用程序导入了 npm 包，我监听这样的事件：

<script>
import Event from "mypackage/utils/customevent";
var test = new Event();
...
  created() {
    test.listen("notification", function(msg) {
      console.log(msg);
    });
  }

Answer 1

我写了一个例子来实现它：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{message}} </div> <button onclick="test()">test</button> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> class MyClass extends EventTarget { doSomething() { this.dispatchEvent(new Event('something')); } } document.getRootNode().instance = new MyClass() function test() { const root = document.getRootNode() root.instance.doSomething(); } var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, created() { const root = document.getRootNode() root.instance.addEventListener('something', (e) => { console.log('Instance fired "something".', e); }); }, }) </script> </body> </html>

如何在 vue js 中监听从“root”发出的事件？

问题描述

1 个解决方案

解决方案1
1 2020-10-29 22:46:26

如何在 vue js 中监听从“root”发出的事件？

问题描述

1 个解决方案

解决方案1 1 2020-10-29 22:46:26

解决方案1
1 2020-10-29 22:46:26