事件

未匹配的标注

事件

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 之间差距的众多方法之一。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~