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

Question

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

下面是我制作的一个自定义事件类：

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

在我的普通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>

​