接收在弹出窗口 Vue3 中发出的问题

Question

我在 Vue3 中有一个带有组件的项目

• 欢迎.vue
• 弹出窗口.vue
• App.vue

我在弹出窗口组件中接收发射有问题

PopupWindow jest wyświetlany gdy zostaje wyemitowany 发出：

emitter.emit('showPopupWindow', false)

它在 welcome.vue 中发出

弹出窗口在 app.vue 中触发：

<popup-window v-if="isPopupWindowVisible" class="popup-window"/>

在

welcome.vue

中，当按下按钮时，它调用函数：

        async updatePosition() {
            const { latitude, longitude } = await this.getPosition();
            this.latitude = latitude;
            this.longitude = longitude;
            console.log("location updated");
            this.emitLocation();
        },

等待数据来自：

        async getPosition() {
            return new Promise((resolve, reject) => {
                navigator.geolocation.getCurrentPosition(
                position => {
                    const { latitude, longitude } = position.coords;
                    resolve({ latitude, longitude });
                    console.log("location get")
                },
                error => {
                    reject(error);
                }
                );
            })
        },

然后我想把这个信息传递给传单地图所在的弹窗组件

我是用函数做的：

        emitLocation() {
            const latitude = this.latitude
            const longitude = this.longitude
            emitter.emit('showPopupWindow', true)
            emitter.emit('latitude', latitude);
            emitter.emit('longitude', longitude);
        },

发出

showPopupWindow

来显示弹出窗口。

然后它发出了多年的数据。

在安装的弹出组件中，我尝试使用

接收此数据

    emitter.on('latitude', (data) => {
        console.log("Location received",data)
        this.latitude = data;
    });
    emitter.on('longitude', (data) => {
        console.log("Location received",data)
        this.longitude = data;
    });

并将它们赋值给data()的属性

第一次加载页面并点击启动按钮后，我得到这些日志：

location get
location updated

Lat 和 Long 被发出（我通过将

console.log()

添加到

emitLocation()

来检查）。

不幸的是，在第一种方法中，弹出窗口没有收到它们，即使它已经安装在页面上

关闭弹出窗口并重新打开后，我得到这些日志

location get
location updated

Location received 52.114762
Location received 20.8922374

所以一切正常。

但是，我不知道如何处理这个问题，以便它在加载页面后的第一次点击时起作用。

此外，即使在第二次尝试接收到数据时也是如此'

例如

this.latitude = data;

来自 emit 的数据未分配给我组件的 Data()。