Livewire アクション、$emit、$emitSelfの動作の違いについて

ショコラ

Livewire アクション、$emit、$emitSelfの動作の違いについて

アクションの場合は、$listeners に登録する必要はない。
$emit、$emitSelf で発行したイベントを受信するには、$listeners に登録しなければならない。
１つのページに同じコンポーネントを複数配置する場合、$emit でイベントを発行すると複数のコンポーネントが反応してしまう。そういう場合は $emitSeft を使う。
今のところ、基本は $emitSelf で良いと思う。全体にメッセージを送信したい場合に $emit を使う。という感じにしておくかな。

もっさん先輩

手順

Laravel と Livewire をインストールして、アクション、$emit、$emitSelf の動作の違いについて確認する手順。

プロジェクト名（liveevent2）を決めて以下のコマンドを実行します。

curl -s https://laravel.build/liveevent2 | bash

インストール時にプロジェクト名のディレクトリが作成されます。

インストールの最後に sudo でパスワードの入力を求められます。

↓下のメッセージが表示されてインストールは終わります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

Get started with: cd liveevent2 && ./vendor/bin/sail up

sail のエイリアスを定義します。

echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc

source ~/.bashrc

Laravel のインストールはここまで。

「sail up」でコンテナを起動します。

cd liveevent2 && sail up -d

ララベルのトップディレクトリで、Livewireパッケージをインストールします。

sail composer require livewire/livewire

次のコマンドを実行して、eventコンポーネントを生成します。

sail artisan make:livewire event

ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Event.php

<?php
namespace App\Http\Livewire;
class Event extends \Livewire\Component
{
  public $count;

  public function incremental1() {
    $this->count++;
  }

  protected $listeners = ['incremental2'];
  public function incremental2() {
    $this->count++;
  }

  public function render() {
    return <<<'EOS'
      <div style="margin:1em;padding:1em;background-color:#AFA;">
        イベントコンポーネント<br>
        {{ $count }}<br>
        <button wire:click="incremental1">+ action</button>
        <button wire:click="$emit('incremental2')">+ $emit</button>
        <button wire:click="$emitSelf('incremental2')">+ $emitSelf</button>
      </div>
      EOS;
  }
}

resources/views/index.blade.php を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <livewire:styles />
  </head>
  <body>
    <livewire:event count="1" />
    <livewire:event count="2" />
    <livewire:scripts />
  </body>
</html>