如何接收发出的事件

Question

我正在使用

vue3

和

option api

如下代码所示，在

toggle-1.vue

中，我发出了

onClsDigitizePolygonInteractionInstanceInit

事件。我想知道如何在

toggle-2.vue

中监听或接收发出的事件

切换-1.vue：

export default {
    emits: {
        'update:vModelToggleDigitize': null,
        onClsDigitizePolygonInteractionInstanceInit: ({ clsDigitizePolygonInteractions }) => {
            if (clsDigitizePolygonInteractions) {
                return true;
            } else {
                return false;
            }
        },
    },
    ....
    ....
    ....
    this.$emit('onClsDigitizePolygonInteractionInstanceInit', { clsDigitizePolygonInteractions }) //how the event is emitted
}

切换-2.vue：

//how to receive emitted event here???
//below is my attempt

<ToggleButtonClearDigitized
    @onClsDigitizePolygonInteractionInstanceInit="onClsDigitizePolygonInteractionInstanceInit">
</ToggleButtonClearDigitized>
....
....
 methods: {
    onClsDigitizePolygonInteractionInstanceInitt(ref) {
        console.log('###ref: ', ref);
    }
},

Answer 1

如果toggle-1.vue是toggle-2.vue的直接子级，您可以简单地监听该事件：

<template>
    <toggle-1 @onClsDigitizePolygonInteractionInstanceInit="onClsDigitizePolygonInteractionInstanceInitHandler">
    </toggle-1>
</template>

如果他们不是父/子，则不能使用 $emit， 您将需要依赖像 mitt 这样的外部库： https://npm.io/package/mitt

然后做：

this.$mitt.emit('onClsDigitizePolygonInteractionInstanceInit', { clsDigitizePolygonInteractions })

this.$mitt.on('onClsDigitizePolygonInteractionInstanceInit', this.onClsDigitizePolygonInteractionInstanceInitHandler)

这里我使用的是我这样设置的 $mitt 全局属性：

import mitt from 'mitt';
app.use({
    install: (app) => {
        app.config.globalProperties.$mitt = mitt();
    }
})