如何让 vue 文件监听（mitt 的 emitter.on）来自外部 js 文件的 emitter.emit 事件？

Question

我的问题是我有一个外部文件，想发出一个 Vue 文件可以访问的事件。

external.js:

import mitt from 'mitt';
const emitter = mitt();

function transaction(){
  emitter.emit('TRANSACTION_CONFIRMED_NOTIFICATION', true)
}

vue 文件：

const internalInstance = getCurrentInstance();
const emitter = internalInstance.appContext.config.globalProperties.emitter;
setup(){    
  emitter.on("TRANSACTION_CONFIRMED_NOTIFICATION", payload => {
     console.log('notify ' + payload);
  });
}

我可以知道它是如何工作的吗？

Answer 1

您的 Vue 文件和外部脚本需要使用相同的发射器实例来侦听它们之间的工作。

如果您可以控制外部脚本，请导出发射器实例，以便 Vue 文件可以导入它：

external.js:

export const emitter = mitt()

//...

Vue文件：

import { emitter } from './external'

export default {
  setup() {
    emitter.on(/*...*/)
  }
}

如何让 vue 文件监听（mitt 的 emitter.on）来自外部 js 文件的 emitter.emit 事件？

How to make vue file listen (mitt's emitter.on) to emitter.emit event from an external js file?

javascript

vue.js

eventemitter

emit