如何在Livewire 2.x组件间传递数据？（DeliveryFees传值给CheckoutPost）

下面提供三种可行的方法，实现将DeliveryFees组件的$deliveryFees值传递给CheckoutPost组件并渲染：

方案一：使用Livewire事件（emit/listen） #

这是Livewire组件间实时通信的标准方式，适合数据需要即时同步的场景。

修改DeliveryFees.php #

添加属性更新钩子，在配送费变化时触发事件：

public $deliveryFees = "0";

// 当deliveryFees属性更新时，向外触发事件传递最新值
public function updatedDeliveryFees()
{
    $this->emit('deliveryFeesUpdated', $this->deliveryFees);
}

public function render()
{
    $cart = Cart::content();
    return view('livewire.delivery-fees', compact('cart'));
}

修改CheckoutPost.php #

监听事件并更新本地属性（修正原代码的拼写错误fucntion为function）：

class CheckoutPost extends Component
{
    public $receivedDeliveryFees = "0";

    // 绑定事件与处理方法
    protected $listeners = ['deliveryFeesUpdated' => 'updateDeliveryFees'];

    public function updateDeliveryFees($fees)
    {
        $this->receivedDeliveryFees = $fees;
    }

    public function render()
    {
        return view('livewire.checkout-post');
    }
}

在livewire.checkout-post视图中渲染 #

直接输出接收的配送费：

<div>
    配送费：{{ $receivedDeliveryFees }}
</div>

方案二：通过父组件传递数据 #

如果两个组件处于同一个父视图/组件中，可以借助父组件作为中间层共享数据。

父视图（或父组件模板） #

引入两个组件并传递父组件的共享属性：

<div>
    @livewire('delivery-fees')
    @livewire('checkout-post', ['deliveryFees' => $deliveryFees])
</div>

修改DeliveryFees.php #

更新配送费时通知父组件：

public $deliveryFees = "0";

public function updatedDeliveryFees()
{
    // 向上触发事件，将新值传递给父组件
    $this->emitUp('deliveryFeesChanged', $this->deliveryFees);
}

public function render()
{
    $cart = Cart::content();
    return view('livewire.delivery-fees', compact('cart'));
}

父组件（可选，若使用Livewire父组件而非原生blade） #

class ParentCheckoutComponent extends Component
{
    public $deliveryFees = "0";

    protected $listeners = ['deliveryFeesChanged' => 'updateFees'];

    public function updateFees($fees)
    {
        $this->deliveryFees = $fees;
    }

    public function render()
    {
        return view('livewire.parent-checkout-component');
    }
}

修改CheckoutPost.php #

接收父组件传递的属性：

class CheckoutPost extends Component
{
    public $deliveryFees;

    public function render()
    {
        return view('livewire.checkout-post');
    }
}

视图渲染 #

<div>
    配送费：{{ $deliveryFees }}
</div>

方案三：使用Session存储数据 #

适合需要跨请求保留配送费数据的场景，结合事件实现实时刷新。

修改DeliveryFees.php #

更新配送费时存入Session并触发刷新事件：

public $deliveryFees = "0";

public function updatedDeliveryFees()
{
    session()->put('delivery_fees', $this->deliveryFees);
    $this->emit('refreshDeliveryFees');
}

public function render()
{
    $cart = Cart::content();
    return view('livewire.delivery-fees', compact('cart'));
}

修改CheckoutPost.php #

从Session读取数据，并监听刷新事件：

class CheckoutPost extends Component
{
    public $deliveryFees;

    public function mount()
    {
        // 初始化时从Session读取默认值
        $this->deliveryFees = session()->get('delivery_fees', '0');
    }

    protected $listeners = ['refreshDeliveryFees' => 'refreshFees'];

    public function refreshFees()
    {
        $this->deliveryFees = session()->get('delivery_fees', '0');
    }

    public function render()
    {
        return view('livewire.checkout-post');
    }
}

视图渲染 #

<div>
    配送费：{{ $deliveryFees }}
</div>

内容的提问来源于stack exchange，提问作者MOHAMED KESSOUM