Wie verwende ich Laravel Livewire? 14 praktische Tipps zum Teilen

Laravel Livewire ist ein großartiges Tool zum Implementieren dynamischen Verhaltens auf Ihrer Seite, ohne direkt JavaScript-Code schreiben zu müssen. Und wie jedes Tool verfügt es über viele „verborgene Schätze“, darunter offizielle Dokumentation und nützliche Zusatztipps der Entwickler. Ich habe beschlossen, einige davon in diesem Artikel zusammenzustellen. Fangen wir an!

1. Keine Notwendigkeit für render()

render()

典型的render()方法看起来像这样：

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

但是，如果你的render()方法只是一个单行来呈现 默认 视图，您可以从组件中删除该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

请注意，第一种方式是第一个字母大写，第二种方式是小写。在这两种情况下，都会生成两个文件：

• 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 生成组件时打错字，请不要担心。您不需要手动重命名两个文件，有一个命令供我们使用。

例如，如果您编写了php artisan 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」文件夹中，但您也可以根据需要发布和编辑它们。

Run this command:

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 artisan make:livewire Component，它都会从您更新的模板中获取「公共存根」。

---

6. 不要为了设置值而创建方法

如果您有一个会设置某个属性的某个值的Click事件，您可以这样：

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

然后

class Show extends Component
{
    public $showText = false;

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

但实际上，您可以直接从vender文件为Livewire属性赋一个新值，而不需要在Livewire组件中有单独的方法。

以下是代码：

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

因此，如果您的属性是一个布尔变量，并且希望有一个显示/FALSE按钮，则您需要调用$set并提供两个参数：您的属性名称和新值。

---

7. 更进一步：轻松设置 true/false

在上一个技巧之后，如果您的属性是一个带有true/false的布尔变量，并且您想要有一个显示/隐藏按钮，您可以这样：

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

注意：我个人会避免使用 Livewire 来实现这种简单的切换效果，因为它会向服务器添加额外的请求。

相反，最好使用 JavaScript，例如 Alpine.js：

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

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

---

8. 最小化服务器请求的三种方法

Livewire 的主要诟病之一是它对服务器的请求太多。如果您在输入字段中有wire:model，则每次击键都可能会调用服务器以重新渲染组件。如果您有一些实时效果，例如「实时搜索」，那将非常方便。但通常，就性能而言，服务器请求可能非常昂贵。

但是，自定义 wire:model 的这种行为非常容易。

• wire:model.debounce：默认情况下，Livewire 在输入按键后等待 150 毫秒，然后再向服务器执行请求。 但您可以覆盖它：6cc30fcdb6819fab11b0c56e96c70e59Die typische render()-Methode sieht so aus:

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

  🎜Allerdings, wenn Ihre render()-Methode ist nur eine einzige Zeile zum Rendern der 🎜Standardansicht. Sie können die render()-Methode aus der Komponente entfernen und sie wird weiterhin verwendet Arbeit, das Laden der Methode vom Anbieter ist standardmäßig render(). [Verwandte Empfehlungen: Laravel-Video-Tutorial]🎜

  <div>
      <button wire:click="checkout">Checkout</button>
  
      <div wire:loading>
          Processing Payment...
      </div>
  </div>

  ---

  🎜🎜2 . Komponenten in Unterordnern🎜Wenn Sie eine Komponente in einem Unterordner generieren möchten, z. B. app/Http/Livewire/Folder/Component.php, haben Sie zwei Methoden: 🎜

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

  🎜 oder 🎜

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

  🎜 Bitte beachten Sie, dass die erste Möglichkeit die Großschreibung des ersten Buchstabens und die zweite Möglichkeit die Kleinschreibung ist. In beiden Fällen werden zwei Dateien generiert: 🎜
  • app/Http/Livewire/Folder/Component.php
  • resources/views/livewire/folder/component.blade php
  🎜Wenn keine Unterordner vorhanden sind, werden diese automatisch erstellt. 🎜

  ---

  🎜🎜3. Komponenten in nicht standardmäßigen Ordnern🎜Wenn Sie einige externe Pakete mit Livewire-Komponenten verwenden, befinden sich Ihre Livewire-Komponenten möglicherweise im selben Ordner wie der Standard- app/Http/Livewire in einem anderen Ordner. Möglicherweise müssen Sie den Namen an einen tatsächlichen Standort binden. 🎜🎜Dies kann normalerweise in der Methode app/Providers/AppServiceProvider.php (oder einem beliebigen Dienstanbieter) boot() erfolgen: 🎜

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

  ---

  🎜🎜4 . Komponenten einfach umbenennen oder verschieben🎜Machen Sie sich keine Sorgen, wenn Ihnen beim Generieren einer Komponente mit make:livewire ein Tippfehler unterläuft. Sie müssen die beiden Dateien nicht manuell umbenennen, es gibt einen Befehl, den wir verwenden können. 🎜🎜Wenn Sie zum Beispiel php artisan make:livewire Prduct geschrieben haben, aber „Produkt“ möchten und sich auch dafür entscheiden, es in einen Unterordner zu legen, können Sie es mit dem folgenden Befehl verbessern: 🎜

  class ShowPosts extends Component
  {
      use WithPagination;
  
      protected $paginationTheme = 'bootstrap';

  🎜 Das Ergebnis sieht folgendermaßen aus: 🎜

  class ShowPost extends Component{
      public $post;
  
      public function mount(Post $post)
      {
          $this->post = $post;
      }
  }

  ---

  🎜🎜5. Ändern Sie die Standardkomponentenvorlage🎜Livewire-Komponenten werden mithilfe der Standardvorlage, dem sogenannten „Stub“, generiert. Sie sind im Ordner „vendor“ des Livewire-Pakets versteckt, Sie können sie aber nach Bedarf veröffentlichen und bearbeiten. 🎜🎜Führen Sie diesen Befehl aus:🎜

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

  🎜Sie werden einen neuen Ordner /stubs mit einigen Dateien darin finden. Beispiel für
  stubs/livewire.stub: 🎜

  class ShowPost extends Component{
      public Post $post;
  }

  🎜Wenn Sie beispielsweise eine Komponente generieren möchten, die nicht die Methode render() verwendet, reicht es aus Entfernen Sie es aus der Stub-Datei und jedes Mal, wenn Sie php artisan make:livewire Component ausführen, wird der „öffentliche Stub“ aus Ihrer aktualisierten Vorlage abgerufen. 🎜

  ---

  🎜🎜6. Erstellen Sie keine Methode, nur um einen Wert festzulegen🎜Wenn Sie ein Click-Ereignis haben, das einen Wert für eine Eigenschaft festlegt, können Sie Folgendes tun: 🎜

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

  🎜Dann 🎜

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

  🎜Aber tatsächlich können Sie der Livewire-Eigenschaft direkt aus der Herstellerdatei einen neuen Wert zuweisen, ohne eine separate Methode in der Livewire-Komponente zu haben. 🎜🎜Hier ist der Code: 🎜rrreee🎜Wenn Ihre Eigenschaft also eine boolesche Variable ist und Sie eine SHOW/FALSE-Schaltfläche haben möchten, müssen Sie $set aufrufen und zwei Parameter angeben: Ihren Eigenschaftsnamen und neuer Wert. 🎜

  ---

  🎜🎜7. Gehen Sie einen Schritt weiter: Setzen Sie einfach wahr/falsch🎜Nach dem vorherigen Tipp, wenn Ihre Eigenschaft eine boolesche Variable mit wahr/falsch ist und Sie eine haben möchten Klicken Sie auf die Schaltfläche „Einblenden/Ausblenden“, um Folgendes zu tun: 🎜rrreee🎜🎜 HINWEIS: Ich persönlich würde die Verwendung von Livewire für diesen einfachen Umschalteffekt vermeiden, da dadurch zusätzliche Anforderungen an den Server hinzugefügt werden. 🎜🎜Stattdessen ist es besser, JavaScript zu verwenden, wie zum Beispiel Alpine.js: 🎜rrreee

  ---

  🎜🎜8. Drei Möglichkeiten, Serveranfragen zu minimieren🎜Einer der Hauptkritikpunkte an Livewire ist, dass es zu viele Anfragen an den Server stellt. Wenn Sie wire:model in einem Eingabefeld haben, ruft jeder Tastendruck möglicherweise den Server auf, die Komponente neu zu rendern. Es wäre sehr praktisch, wenn Sie über einige Echtzeiteffekte verfügen würden, beispielsweise über die Live-Suche. Aber im Allgemeinen können Serveranfragen hinsichtlich der Leistung sehr teuer sein. 🎜🎜Es ist jedoch sehr einfach, dieses Verhalten von wire:model anzupassen. 🎜
  • 🎜wire:model.debounce: Standardmäßig wartet Livewire 150 Millisekunden nach der Eingabe eines Tastendrucks, bevor es ihn an den sendet server Führen Sie die Anforderung aus. Aber Sie können es überschreiben: 62ac175013e72f80b1fc409981b79167🎜

  • 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

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

Das obige ist der detaillierte Inhalt vonWie verwende ich Laravel Livewire? 14 praktische Tipps zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!