Laravel 和 Vue 在 Blade 中从组件 1 向组件 2 发送数据

Question

不知道这是否可能。

但这里是上下文。

我有一个会员状态（活动/非活动）的左侧导航栏。 当支付网关收到付款时，会通过 Paddle(Laravel Paddle API) 发送一个 webhook。

在 webhook 期间，我将用户重定向到感谢页面（带有 vue 组件的刀片）。

app.js

let Event = new Vue();
window.Event = Event;

navbar.blade.php

<componentOne></componentOne>
<componentTwo></componentTwo>

组件一

    mounted(){
        Event.$emit("updateStatus");
    },

组件二：

    mounted() {
        this.fetchStatus();
        Event.$on("updateStatus", () => {
            setTimeout(() => {
                console.log('testing!');
            }, 4000);
        })
    },

我希望即使在组件 2 中也能捕捉到这一点，但什么也没有.....

知道我做错了什么吗？这是我第一次尝试在刀片中这样做。

我知道这两个组件都在一个 PHP 页面中，但我希望 Vue 可能仍然能够以某种方式通过 app.js 进行通信。

谢谢！

Answer 1

可能是一种竞争条件，其中 componentOne 在安装 componentTwo 之前发出事件，因此它还没有监听。尝试将您的 $on 调用移至 created() 或什至在 $emit 上设置超时。不过我可能误解了你的流程。