イベント 2.x Livewire

深く掘り下げたスクリーンキャストがある、Livewireに驚いてください。観る（英語版）

Livewireコンポーネントは、グローバルイベントシステムを介して相互に通信できます。２つのLivewireコンポーネントが同じページに存在する限り、イベントとリスナーを使用して通信できます。

イベントの発行

Livewireコンポーネントからイベントを発生させる方法はいろいろあります。

方法A: テンプレートでの発行

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

方法B: コンポーネントでの発行

$this->emit('postAdded');

方法C: グローバルJavaScriptからの発行

<script>
    Livewire.emit('postAdded')
</script>

イベントリスナ

イベントリスナは、Livewireコンポーネントの$listenersプロパティに登録されます。

リスナはキー=>値のペアです。キーはリッスンするイベントで、値はコンポーネント上で呼び出すメソッドです。

class ShowPosts extends Component
{
    public $postCount;

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

    public function incrementPostCount()
    {
        $this->postCount = Post::count();
    }
}

これで、ページ上の他のコンポーネントがpostAddedイベントを発行すると、このコンポーネントはそれを取得し、それ自身上でincrementPostCountメソッドを起動します。

Tip!! イベントの名前と呼び出すメソッドが一致する場合は、キーを省略できます。たとえば、protected $listeners = ['postAdded'];はpostAddedイベントが発行されたとき、postAddedメソッドを呼び出します。

イベントリスナに動的に名前を付ける必要がある場合は、コンポーネントのgetListeners() protectedメソッドの代わりに$listenersプロパティを使用できます。

class ShowPosts extends Component
{
    public $postCount;

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

    ...
}

パラーメータを渡す

イベント発行時にパラメータを送信することもできます。

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

class ShowPosts extends Component
{
    public $postCount;
    public $recentlyAddedPost;

    protected $listeners = ['postAdded'];

    public function postAdded(Post $post)
    {
        $this->postCount = Post::count();
        $this->recentlyAddedPost = $post;
    }
}

イベントのスコープ

親リスナへのスコープ

[ネストしたコンポーネント]（nesting-components）を処理する場合、子や兄弟コンポーネントではなく、親にのみイベントを発行したい場合が起きます。

その場合、emitUp機能が使用できます。

$this->emitUp('postAdded');

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

名前でコンポーネントをスコープ

同じタイプの他のコンポーネントにのみ、イベントを発行したい場合もあるでしょう。

このような場合、emitToを使用します。

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

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

（これで、ボタンがクリックされた場合、"postAdded"イベントはcounterコンポーネントにのみ発行されます。）

自身のスコープ

イベントを発生させたコンポーネントでのみイベントを発行したい場合があります。

このような場合、emitSelfが使用できます。

$this->emitSelf('postAdded');

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

（これで、ボタンがクリックされた場合、"postAdded"イベントは、それが発行されたコンポーネントのインスタンスにのみ発行されます。）

JavaScriptでイベントをリッスンする

Livewireを使用すると、以下のようにJavaScriptでイベントリスナを登録できます。

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

Tip!! この機能は本当に信じられないほど強力です。たとえば、Livewireが特定のアクションを実行したときに、アプリ内にトースター（ポップアップ）を表示するリスナを登録できます。これは、Livewireを使用してPHPとJavaScriptの間のギャップを埋める多くの方法の1つです。

ブラウザイベントのディスパッチ

Livewireを使用すると、以下のようにブラウザウィンドウイベントを発生させることができます。

$this->dispatchBrowserEvent('name-updated', ['newName' => $value]);

JavaScriptを使用してこのウィンドウイベントをリッスンできます。

<script>
window.addEventListener('name-updated', event => {
    alert('Name updated to: ' + event.detail.newName);
})
</script>

AlpineJSを使用すると、HTML内でこれらのウィンドウイベントを簡単にリッスンできます。

<div x-data="{ open: false }" @name-updated.window="open = false">
    <!-- Modal with a Livewire name update form -->
</div>

Livewire 2.x イベント