事件

Livewire 组件可以通过全局事件系统相互通信。 只要两个 Livewire 组件都位于同一页面上，它们就可以使用事件和侦听器进行通信。

事件触发

有多种方法可以从Livewire组件触发事件。

方法 A: 从模板触发

<button wire:click="$emit('postAdded')">

方法 B: 从组件触发

$this->emit('postAdded');

方法 C: 从全局 JavaScript 触发

<script>
    window.livewire.emit('postAdded')
</script>

事件监听

事件侦听器已在Livewire组件的 $listeners 属性中注册。

侦听器是一个键值对形式的数组，其中键是要侦听的事件，而值是要在组件上调用的方法。

ShowPosts

use Livewire\Component;

class ShowPosts extends Component
{
    public $addedMessageVisible = false;

    protected $listeners = ['postAdded' => 'showPostAddedMessage'];

    public function showPostAddedMessage()
    {
        $this->addedMessageVisible = true;
    }

    public function render()
    {
        return view('livewire.show-posts');
    }
}

现在，当页面上的任何其他组件发出 postAdded 事件时，此组件将对其进行监听并自行触发 showPostAddedMessage 方法。

如果事件的名称与您要调用的方法匹配，则可以省略键。 例如：protected $listeners = ['postAdded']; 将在发出 postAdded 事件时调用 postAdded 方法。

如果您需要动态命名事件监听器，则可以用 getListeners() 方法代替$listeners 属性：

ShowPosts

use Livewire\Component;

class ShowPosts extends Component
{
    public $addedMessageVisible = false;

    protected function getListeners()
    {
        return ['postAdded' => 'showPostAddedMessage'];
    }

    ...
}

传递参数

您还可以发送带有参数的事件。

$this->emit('postAdded', $post->id);

ShowPosts

use Livewire\Component;

class ShowPosts extends Component
{
    public $addedMessageVisible = false;
    public $addedPost;

    protected $listeners = ['postAdded'];

    public function postAdded($postId)
    {
        $this->addedMessageVisible = true;
        $this->addedPost = Post::find($postId);
    }

    public function render()
    {
        return view('livewire.show-posts');
    }
}

事件作用域

作用于父级组件监听器

当处理 嵌套组件 时，有时您可能只想向父级而不是子级或其他平级组件发送事件。

在这些情况下，您可以使用 emitUp 功能：

$this->emitUp('postAdded');

<button wire:click="$emitUp('postAdded')">

作用于指定名字的组件

有时，您可能只想向同一类型的其他组件发出事件。

在这些情况下，您可以使用 emitTo：

$this->emitTo('counter', 'postAdded');

<button wire:click="$emitTo('counter', 'postAdded')">

（现在，如果单击该按钮，则 postAdded 事件将仅发送给 counter 组件）

仅作用于自身

有时，您可能只想在触发该事件的组件上发出一个事件。 这对于在 PHP 中触发事件并在 JavaScript 中侦听事件很有用。

在这些情况下，您可以使用emitSelf：

$this->emitSelf('postAdded');

<button wire:click="$emitSelf('postAdded')">

（现在，如果单击该按钮，则 postAdded 事件将仅发送到发出该事件的组件的实例。）

JavaScript 中监听事件

Livewire 允许您在 JavaScript 中注册事件监听器，如下所示：

<script>
window.livewire.on('postAdded', postId => {
    alert('A post was added with the id of: ' + postId);
})
</script>

实际上，此功能非常强大。 例如，当 Livewire 执行某些操作时，您可以注册一个侦听器以在应用程序内显示一个弹出窗口。 这是通过 Livewire 弥补 PHP 和 JavaScript 之间差距的众多方法之一。