Livewire 2.x イベント

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

Livewireコンポーネントは、グローバルイベントシステムを介して相互に通信できます。2つの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>

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる