Livewire & Laravel 8：更新全局组件

Question

我对组件和 livewire 游戏还很陌生，所以当我需要从其他来源更新组件值时，我会感到非常困惑。让我解释一下：

我正在使用带有 Livewire 的默认 Laravel 8 安装 - 没有 JetStream。

我的导航文件（安装时附带的默认文件）包含 3 个单独的组件，其中包括：获得的总点数、总生命和剩余生命。

加载如下：

<x-points>0</x-points>

<x-lifes>0</x-lifes>

<x-remaining-lifes>0</x-remainung-lifes>

我的问题：当我执行来自不同来源的操作时，如何更新这些组件中的任何一个：

• 用户回答问题（文件 Answer.php）
• 用户点击了我的应用程序底部的一个动作（我们称之为 Regenerate.php）
• 用户请求提示所以我需要减去(Tips.php)

Answer 1

我会将您的三个主要刀片组件更改为 livewire 组件：

<livewire:points></livewire:points>

<livewire:lifes></livewire:lifes>

<livewire:remaining-lifes></livewire:remaining-lifes>

例如，让我们创建points 和answer 组件。

// Points.php livewire component

public int points = 0;

public $listeners = ['loadUserPoints'];

public function render() { ... }

public function loadUserPoints()
{
     $this->points = user()->points()->sum('total');
}

// points.blade.php livewire component

<div wire:init="loadUserPoints">{{ $points }}</div>

现在让我们抽象出answer 组件。

// answer livewire component (very abstracted)

public function save()
{
     user()->answers()->create($this->data);

     // this will be listened by the points component
     // that will run its query and update your frontend
     $this->emit('loadUserPoints');
}

所以 livewire 主要用于事件，您必须使用它来跨多个组件传递数据。要将您的前端更新为 SPA，您不会使用刀片组件，您必须使用 livewire 组件或大量 javascript 来处理 DOM。