Laravel 開発: Laravel Livewire を使用して Blade コンポーネントを実装するにはどうすればよいですか?-Laravel-php.cn

Laravel 開発: Laravel Livewire を使用して Blade コンポーネントを実装するにはどうすればよいですか?

王林

リリース： 2023-06-15 18:30:04

オリジナル

1794 人が閲覧しました

Laravel が人気の PHP フレームワークになるにつれて、その開発はますます便利になりました。 Laravel フレームワークのエコシステムには、多くの優れた拡張パッケージがあり、その 1 つが Laravel Livewire です。この拡張パッケージは、リアルタイムのインタラクティブなエクスペリエンスを簡単に実装でき、Laravel の Blade ビューでの使用に非常に適しています。

この記事では、Laravel Livewire を使用して Blade コンポーネントを実装し、リアルタイムの動的アプリケーションを簡単に構築する方法を紹介します。

Laravel Livewireとは何ですか?

Laravel Livewire は、JavaScript を使用せずにリアルタイムのインタラクティブなエクスペリエンスを作成できる PHP 拡張機能パッケージです。 PHP の構文構造 (たとえば、if ステートメント、for ループ、関数呼び出しなど) を使用して、ブレードビューの対話型部分を構築します。

Livewire を使用する利点は、関数ごとに JavaScript で大量のロジックコードを記述する必要がないことです。代わりに、PHP の既存のスキルを再利用して、コードをより適切に保守できます。さらに、Livewire の学習曲線は比較的低く、多くの Laravel 開発者は短期間で Livewire をマスターできます。

Laravel Livewire の使用を開始する

Livewire をインストールする

Laravel Livewire をインストールすると非常に便利です。次のコマンドを実行するだけです:

composer require livewire/livewire

ログイン後にコピー

コンポーネントを作成

Laravel Livewire を使用すると、アプリケーションにレンダリングするステートレスコンポーネントを作成できます。 Livewire を使用すると、コンポーネントを作成し、Blade 構文を使用してレンダリングできます。

次のコマンドを使用して、新しい Livewire コンポーネントを作成できます:

php artisan make:livewire HelloLivewire

ログイン後にコピー

上記のコマンドを実行すると、Laravel は HelloLivewire という名前の新しいコンポーネントを作成します。 HelloLivewire.php という名前のファイルと hello-livewire.blade.php という名前のビューが app/Http/Livewire ディレクトリに作成されます。

インタラクションの実現

コンポーネントクラスの render 関数に Blade テンプレートコードを記述することで、コンポーネントの HTML 構造を指定できます。

このテンプレートでは、wire:model ディレクティブを使用して、コンポーネントプロパティの双方向バインディングを作成できます。これは、ユーザーがフォームに値を入力すると、その値がコンポーネントによってレンダリングされる HTML に即座に表示されることを意味します。同様に、Laravel Livewire 経由でプロパティの値を更新すると、その値はすぐに HTML に反映されます。

たとえば、カウンターを表示し、ボタンが押されたときにカウンターの値をインクリメントするコンポーネントを作成してみましょう。

class Counter extends Component
{
    public $count = 0;

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

    public function render()
    {
        return view('livewire.counter');
    }
}

ログイン後にコピー

<!-- counter.blade.php -->
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">Click me</button>
</div>

ログイン後にコピー

上記のコードでは、Counter という名前のコンポーネントを作成しました。このコンポーネントには $count プロパティが含まれており、render 関数で使用すると、{{ $count }} メソッドを使用してカウンター値をレンダリングできます。

ユーザーがボタンをクリックすると、wire:click ディレクティブは、コンポーネントの increment メソッドを呼び出します。このメソッドは、$ count に使用されます。値がインクリメントされます。このロジックは Laravel コントローラー内で実行されるため、対話型機能を実装するには PHP コードのみを更新する必要があります。

コンポーネントをブレードビューにレンダリングする

最後のステップでは、コンポーネントをアプリケーションのブレードビューにレンダリングする必要があります。 @livewire Blade ディレクティブを使用して Livewire コンポーネントをレンダリングできます。

たとえば、welcome.blade.php ビューで次のコードを使用して、作成したばかりの Counter コンポーネントをレンダリングできます:

@extends('layouts.app')

@section('content')
    <div class="container mx-auto">
        <div class="my-10">
            @livewire('counter')
        </div>
    </div>
@endsection

ログイン後にコピー

@livewire このディレクティブは、必要な JavaScript と CSS が自動的に挿入されて、Vue.js と React で同様にコンポーネントをレンダリングします。

結論

Laravel Livewire は、Blade コンポーネントの実装を容易にする非常に便利な拡張パッケージです。これにより、多くの JavaScript コードを使用せずに、複雑なインタラクションを簡単に実装できます。 Livewire を利用すると、アプリケーションをより迅速に構築でき、PHP コードを使用して HTML と CSS を構築することで生産性をさらに向上させることができます。

以上がLaravel 開発: Laravel Livewire を使用して Blade コンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。