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

Posted 2023-02-23

【中文标题】Laravel 和 Vue 在 Blade 中从组件 1 向组件 2 发送数据

【英文标题】：Laravel and Vue emit data from component 1 to component 2 within Blade

【发布时间】：2021-02-06 20:45:19

【问题描述】：

不知道这是否可能。

但这里是上下文。

我有一个会员状态（活动/非活动）的左侧导航栏。 当支付网关收到付款时，会通过 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 进行通信。

谢谢！

【参考方案1】：

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

【讨论】：

请使用 cmets 寻求提问者的澄清，而不是答案。

@miken32 不确定如何暗示比赛条件可能是罪魁祸首正在寻求澄清，尤其是在类似情况下这对我来说是个问题，但我会记住你的建议.