Laravel Livewireの使い方は？共有すべき 14 の実践的なヒント

Laravel Livewire は、JavaScript コードを直接記述せずにページに動的な動作を実装するための優れたツールです。また、他のツールと同様に、公式ドキュメントや開発者からの役立つ追加のヒントなど、多くの「隠れた逸品」が含まれています。この記事ではその一部をまとめてみることにしました。はじめましょう！

1. render() は不要です

典型的な render() メソッドは次のようになります:

// app/Http/Livewire/PostsShow.php
class PostsShow extends Component
{
    public function render()
    {
        return view('livewire.posts-show');
    }
}

ただし、render() メソッドが default ビューをレンダリングするための 1 行だけの場合は、その render() をコンポーネント メソッドは引き続き機能しますが、プロバイダーからロードされるメソッドのデフォルトは render() です。 [関連する推奨事項: laravel ビデオ チュートリアル ]

class PostsShow extends Component
{
    //这个空组件仍将工作并加载Blade文件
}

---

2. サブフォルダー内のコンポーネント

app/Http/Livewire/Folder/Component.php のようなフォルダーを作成するには、

php artisan make:livewire Folder/Component

または

php artisan make:livewire folder.component

の 2 つの方法があります。1 つの方法は次のとおりであることに注意してください。最初の文字を大文字にする方法と、小文字にする方法です。どちらの場合も、次の 2 つのファイルが生成されます:

• app/Http/Livewire/Folder/Component.php
• resources/views/livewire/folder/component.blade .php

サブフォルダーが存在しない場合は、自動的に作成されます。

---

3. デフォルト以外のフォルダー内のコンポーネント

Livewire コンポーネントで一部の外部パッケージを使用する場合、Livewire コンポーネントは別のフォルダーに配置される可能性があります。デフォルトの app/Http/Livewire よりも異なります。その名前を実際の場所にバインドする必要がある場合があります。

これは通常、app/Providers/AppServiceProvider.php (または任意のサービス プロバイダー) メソッド boot():

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Livewire::component('shopping-cart', \Modules\Shop\Http\Livewire\Cart::class);
    }
}

---

で実行できます。

4. コンポーネントの名前変更や移動が簡単にできる

make:livewire を使用してコンポーネントを生成するときにタイプミスをしても心配する必要はありません。 2 つのファイルの名前を手動で変更する必要はありません。使用できるコマンドがあります。

たとえば、php 職人 make:livewire Prduct を作成したが、「Product」が必要で、それをサブフォルダーに配置することにした場合、次のコマンドを使用できます。

php artisan livewire:move Prduct Products/Show

結果は次のようになります:

COMPONENT MOVED
CLASS: app/Http/Livewire/Prduct.php
    => app/Http/Livewire/Products/Show.php
VIEW:  resources/views/livewire/prduct.blade.php
    => resources/views/livewire/products/show.blade.php

---

5. デフォルトのコンポーネント テンプレートを変更します

Livewire コンポーネントはデフォルトのテンプレートを使用していますテンプレート 生成される、いわゆる「スタブ」。これらは Livewire パッケージの「vendor」フォルダーに隠されていますが、必要に応じて公開および編集できます。

次のコマンドを実行します:

php artisan livewire:stubs

いくつかのファイルを含む新しいフォルダー /stubs が見つかります。
stubs/livewire.stub 例:

<?php

namespace [namespace];

use Livewire\Component;

class [class] extends Component
{
    public function render()
    {
        return view(&#39;[view]&#39;);
    }
}

たとえば、render() メソッドを使用しないコンポーネントを生成したい場合は、それをスタブ ファイルから削除してから変更し、php 職人 make:livewire コンポーネント を実行するたびに、更新されたテンプレートから「パブリック スタブ」を取得します。

---

6. 値を設定するためだけにメソッドを作成しないでください

プロパティの値を設定する Click イベントがある場合は、次のことができます。これを実行します:

<button wire:click="showText">Show</button>

Then

class Show extends Component
{
    public $showText = false;

    public function showText() {
        $this->showText = true;
    }
}

しかし、実際には、Livewire コンポーネントに別のメソッドを持たなくても、ベンダー ファイルから Livewire プロパティに新しい値を直接割り当てることができます。

コードは次のとおりです:

<button wire:click="$set(&#39;showText&#39;, true)">Show</button>

したがって、プロパティがブール変数であり、SHOW/FALSE ボタンが必要な場合は、$set を呼び出して、プロパティ名と新しい値の 2 つのパラメーターを指定します。

---

7. さらに一歩進めます: true/false を簡単に設定します

前のヒントの後、プロパティが true/false 変数を持つブール値の場合、表示/非表示ボタンが必要な場合は、次のようにします。

<button wire:click="$toggle(&#39;showText&#39;)">Show/Hide</button>

NOTE: 個人的には、この単純な切り替え効果に Livewire を使用することは避けたいと思います。これは、追加のリクエストが追加されるためです。サーバ。

代わりに、Alpine.js:

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>

    <span x-show="open">
      Content...
    </span>
</div>

---

8 などの JavaScript を使用することをお勧めします。サーバー リクエストを最小限に抑える 3 つの方法

Livewire に対する主な批判の 1 つは、サーバー上に送信されるリクエストが多すぎることです。入力フィールドに wire:model がある場合、キーストロークごとにサーバーが呼び出され、コンポーネントが再レンダリングされる可能性があります。ライブサーチなどのリアルタイムエフェクトがあると非常に便利です。ただし、一般に、サーバー リクエストはパフォーマンスの点で非常に高価になる可能性があります。

ただし、wire:model のこの動作をカスタマイズするのは非常に簡単です。

• wire:model.debounce: デフォルトでは、Livewire はキーストロークが入力されてからサーバーへのリクエストを実行するまで 150 ミリ秒待機します。ただし、これをオーバーライドすることはできます: <input type="text" Wire:model.debounce.1000ms="propertyName">

• wire:model.lazy：默认情况下，Livewire 会监听输入上的所有**事件，然后执行服务器请求。 通过提供 lazy 指令，您可以告诉 Livewire 仅监听 change 事件。 这意味着用户可以继续输入和更改，并且只有当用户点击离开该字段时才会触发服务器请求。

• wire:model.defer：这不会在输入更改时触发服务器请求。 它将在内部保存新值并将其传递给下一个网络请求，该请求可能来自其他输入字段或其他按钮的点击。

---

9.自定义验证属性

Livewire 验证的工作方式与 Laravel 验证引擎非常相似，但有一些不同之处。在 Laravel 中，如果你想自定义属性的名称，你可以定义 attributes() 方法 在表单请求类中。

在 Livewire 中，方法不同。 在组件中，您需要定义一个名为「$validationAttributes」的属性并在那里分配键值数组：

class ContactForm extends Component
{
    protected $validationAttributes = [
        'email' => 'email address'
    ];

    // ...
}

这对于常见的错误消息很有用，例如「需要字段 XYZ」。默认情况下，该 XYZ 被替换为字段名称，用户可能不会理解这个的词，因此应该将其替换为更清晰的错误消息。

---

10. 加载提示

从我所见，官方文档中描述但很少使用的东西。如果某些动作在屏幕上需要一段时间，则应该显示一些加载指示符，例如旋转的 gif，或者只是「正在加载数据…」的文本

在 Livewire 中，它不仅易于实现，而且还易于定制。

处理数据的最简单示例：当服务器发出请求时，它将显示「正在处理付款…」文本，直到服务器请求完成并返回结果。

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading>
        Processing Payment...
    </div>
</div>

在实践中，我喜欢仅在需要一段时间时才显示此类加载指示器。在所有可能的情况下，每次都重新渲染 DOM 是没有意义的。 如果我们只在请求时间超过 500 毫秒时才这样做呢？

这很简单：

<div wire:loading.delay.longer>...</div>

还有可能使用 CSS 类来加载状态，将它们附加到特定的操作，等等：阅读 [官方文档](laravel-livewire.com/docs/2.x/load... #states#toggling-elements）。

---

11. 离线指示器

Livewire 的另一个记录在案但鲜为人知的功能是告诉用户他们的互联网连接是否丢失。如果您的应用程序使用实时数据或屏幕上的多次更新，这将是非常有用的：您可能会模糊网页的某些部分并显示「离线」文本。

这也很简单：

<div wire:offline>
    You are now offline.
</div>

此外，正如我所提到的，您可以通过分配 CSS 类来模糊某些元素，如下所示：

<div wire:offline.class="bg-red-300"></div>

---

12. 使用 Bootstrap 框架分页

与 Laravel 类似，Livewire 默认使用来自 Tailwind 框架的分页样式。 幸运的是，它很容易覆盖，只需为属性提供不同的值：

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

您可以直接在 Livewire Github 存储库 中查看可用的分页设计。 在浏览时，我没有找到任何关于使用 Bootstrap 4 还是 Bootstrap 5 版本的信息。

---

13. No Mount：自动路由模型绑定

如果您想将对象传递给 Livewire 组件，这是一种典型的方法，使用 mount() 方法：

class ShowPost extends Component{
    public $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }
}

然后，在 Blade 的某个地方，使用：

@livewire('show-post', $post)

但是您是否知道，如果您为 Livewire 属性提供类型提示，路由模型绑定会自动生效？

class ShowPost extends Component{
    public Post $post;
}

就是这样，根本不需要mount()方法。

---

14.删除时的确认提示

如果您有一个「删除」按钮，并且您想在执行操作之前调用确认弹窗在 JavaScript 中，则此代码将无法在 Livewire 中正常工作：

<button wire:click="delete($post->id)"
        onclick="return confirm(&#39;Are you sure?&#39;)">Delete</button>

对此有一些可能的解决方案，可能最优雅的方法是在 Livewire 事件发生之前停止它：

<button onclick="confirm(&#39;Are you sure?&#39;) || event.stopImmediatePropagation()"
        wire:click="delete($post->id)">Delete</button>

event.stopImmediatePropagation() 如果确认结果是假的，将停止调用LiveWire方法。

您可以在this Github issue discussion中找到一些其他可能的解决方案.

---

就是这样，一些LiveWire特征和小提示。希望对大家有用！

原文地址：https://laravel-news.com/laravel-livewire-tips-and-tricks

译文地址：https://learnku.com/laravel/t/66995

更多编程相关知识，请访问：编程教学！！

以上がLaravel Livewireの使い方は？共有すべき 14 の実践的なヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。