Laravel-Livewire 如何触发事件并监听它们？

Question

我有两个加载 livewire 组件的视图

<x-layouts.formularies>
    <livewire:formularies.edit.display-section :section="$section->id" :formulary="$formulary->id" />
</x-layouts.formularies>

这个组件（display-section）循环调用一个子组件...

<div class="letter mx-auto" id="section-holder">
    <div class="paper-title d-flex justify-content-between">
        @foreach($questionnaire->getData( 'logos', [] ) as $logo)
            <img src="{{ asset($logo[ 'path' ]) }}" class="img-fluid h-100" />
        @endforeach
    </div>

    <div class="section-questions">
        @foreach($section->questions as $question)
            <livewire:formularies.edit.display-row :question="$question->id"
                                                    :formulary="$formulary->id" :wire:key="$question->id" />
            <hr />
        @endforeach
    </div>
</div>

现在，这是 display-row 组件：

<div class="card-body text-center p-1">
    <div class="btn-group m-1" role="group" aria-label="question-{{ $question->id }}">
        @foreach($question->answers as $answer)
            <input type="radio"
                    wire:model="answer"
                    :wire:key="$question->id . '-' . $answer->id"
                    wire:click="setAnswer"
                    class="btn-check"
                    value="{{ $answer->id }}"
                    name="question-{{ $question->id }}"
                    id="question-{{ $question->id }}-{{ $answer->id }}"
                    autocomplete="off" />
            <label class="btn btn-outline-teal text-dark mb-0"
                    for="question-{{ $question->id }}-{{ $answer->id }}">{{ $answer->statement }}</label>
        @endforeach
    </div>
</div>

当用户从单选按钮中选择一个选项时，它会执行一些数据库操作并触发一个应该由父组件监听的事件 (display-section) :

public function setAnswer()
{
    $this->emit( 'formularyUpdated', $this->formulary->id );
    FormularyUpdated::dispatch( $this->formulary, $this->question, $this->answer );
    dd( 'I should not get here if there is a dd before' );
}

如您所见，此函数发出一个 formularyUpdated 带有处方集 ID 的事件。在 DisplaySection 中我有这个：

protected $listeners = [
    'sectionAdvanced',
    'formularyUpdated',
];

/**
    *
    */
public function formularyUpdated( Formulary $formulary )
{
    dd( 'This dd should stop the execution' );
}

出于某种原因，这总是以 "I should not get here if there is a dd before" 结尾，所以，我应该更改什么？为什么我的听众不听或不被解雇？我尝试了不同的方法，但没有成功。

Answer 1

简答

简单总结一下；事件在组件中发出 (PHP) - 哪些事件被发出，哪些数据伴随它，通过响应发送。 Livewire 处理响应，并检查是否有任何事件发出 - 如果是，它会告诉 JavaScript 与该事件对应的对象，发出了这样的事件 - 这些 JavaScript 对象将发出自己的网络请求处理事件。

换句话说，整个事件的监听和发送实际上发生在JavaScript，在Livewire在服务器之间来回的响应和请求中。

较长的答案

当 Livewire 处理请求时，它会确定调用哪些方法以及设置哪些属性。它将看到您正在调用一个方法，并且调用该方法会通过 $this->emit() 发出事件，在您的情况下是方法 setAnswer。完成此操作后，Livewire 将在响应中添加您发出的事件。这些事件的侦听器位于 JavaScript - 因为它不直接与其他 PHP 组件通信。

因此，您的请求触发，您发出事件，响应 returns 表示事件已发出。如果我们查看该请求的网络响应，它可能看起来像这样（这是来自我本地环境的 pseudo-code/test-data），

如您所见，它有一个已发出的事件。我们可以发出更多事件，它们将按照发出的顺序出现。

调度的浏览器事件也是如此，它们也会出现在这里，

对于我在这里展示的内容，这是从 wire:click、

调用的方法

public function myMethod()
{
    $this->emit('my-first-emit', 'My first emit data');
    $this->emit('my-second-emit', ['This time', 'the emit', 'passes an', 'array']);
    $this->dispatchBrowserEvent('browser-dispatched-event', 'My browser-event data!');
}

因此，当 Livewire 收到响应时，它会检查它是否有一些需要处理的效果 - 是否有任何分派的浏览器事件、发出的 Livewire 事件或其他任何东西。

如果响应携带effects.emits下的数据，它会发出那些事件，类似于在原生JavaScript中使用Livewire.emit('event-name', ...data)，以及对应的JavaScript对象不同的组件，将选择那些并向相应的组件发出新的请求。让我们扩展我们的例子，

protected $listeners = ['myListener'];

public function myMethod()
{
    $this->emit('myListener', 'My first emit data');
}

public function myListener($data = null)
{
    // Do something with $data
}

现在，当我们调用方法 myMethod 时，将触发网络请求，这与我们之前看到的一样。但是现在我们也得到了第二个请求，这是我们之前监听的发出的事件。我们可以再次使用网络检查器，这次我们对请求而不是响应感兴趣。

正如我们所见，有两个请求 - 第一个是发出事件的请求，第二个是侦听该事件的请求。第二个请求有一个 update 参数，它的类型是 fireEvent，它还有一些其他的 Livewire-data，参数就是数据。这就是魔法发生的地方，以及它如何监听这些事件。

Laravel-Livewire 如何触发事件并监听它们？

How does Laravel-Livewire fires events and listens to them?

events

listener

laravel

laravel-livewire

laravel-8

简答

较长的答案