Comment utiliser Laravel Livewire ? 14 conseils pratiques à partager

Laravel Livewire est un excellent outil pour implémenter un comportement dynamique sur votre page sans écrire directement de code JavaScript. Et, comme tout outil, il possède de nombreux « joyaux cachés », notamment une documentation officielle et des conseils supplémentaires utiles de la part des développeurs. J'ai décidé d'en compiler quelques-uns dans cet article. Commençons !

1. Pas besoin de 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 毫秒，然后再向服务器执行请求。 但您可以覆盖它：6cc30fcdb6819fab11b0c56e96c70e59La méthode typique render() ressemble à ceci :

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

  🎜Cependant, si Votre méthode render() n'est qu'une seule ligne pour restituer la vue 🎜par défaut, vous pouvez supprimer la méthode render() du composant et elle sera toujours work, le chargement de la méthode à partir du fournisseur est par défaut render(). [Recommandations associées : tutoriel vidéo Laravel]🎜

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

  ---

  🎜🎜2 . Composants dans les sous-dossiers🎜Si vous souhaitez générer un composant dans un sous-dossier, tel que app/Http/Livewire/Folder/Component.php, vous disposez de deux méthodes : 🎜

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

  🎜 ou 🎜

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

  🎜 Veuillez noter que la première méthode est en majuscule avec la première lettre et la deuxième méthode est en minuscule. Dans les deux cas, deux fichiers sont générés : 🎜
  • app/Http/Livewire/Folder/Component.php
  • resources/views/livewire/folder/component.php
  🎜Si les sous-dossiers n'existent pas, ils seront automatiquement créés. 🎜

  ---

  🎜🎜3. Composants dans des dossiers autres que ceux par défaut🎜Si vous utilisez des packages externes avec des composants Livewire, vos composants Livewire peuvent se trouver dans le même dossier que le par défaut. app/Http/Livewire dans un autre dossier. Vous devrez peut-être lier son nom à un emplacement réel. 🎜🎜Cela peut généralement être fait dans la méthode app/Providers/AppServiceProvider.php (ou n'importe quel fournisseur de services) boot() : 🎜

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

  ---

  🎜🎜4 . Renommez ou déplacez facilement des composants🎜Ne vous inquiétez pas si vous faites une faute de frappe lors de la génération d'un composant à l'aide de make:livewire. Vous n'avez pas besoin de renommer les deux fichiers manuellement, il existe une commande que nous pouvons utiliser. 🎜🎜Par exemple, si vous avez écrit php artisan make:livewire Prduct, mais que vous voulez "Product" et décidez également de le mettre dans un sous-dossier, vous pouvez l'améliorer avec la commande suivante : 🎜

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

  🎜 Le résultat sera comme ceci :🎜

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

  ---

  🎜🎜5. Changer le modèle de composant par défaut🎜Les composants Livewire sont générés à l'aide du modèle par défaut, ce qu'on appelle le "stub". Ils sont cachés dans le dossier « fournisseur » du package Livewire, mais vous pouvez les publier et les modifier selon vos besoins. 🎜🎜Exécutez cette commande :🎜

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

  🎜Vous trouverez un nouveau dossier /stubs contenant quelques fichiers. Exemple de
  stubs/livewire.stub : 🎜

  class ShowPost extends Component{
      public Post $post;
  }

  🎜Par exemple, si vous souhaitez générer un composant qui n'utilise pas la méthode render(), il suffit supprimez-le du fichier stub, et chaque fois que vous exécutez php artisan make:livewire Component, il obtiendra le "stub public" de votre modèle mis à jour. 🎜

  ---

  🎜🎜6. Ne créez pas une méthode uniquement pour définir une valeur🎜Si vous avez un événement Click qui définit une valeur pour une propriété, vous pouvez faire ceci : 🎜

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

  🎜Ensuite 🎜

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

  🎜Mais en réalité, vous pouvez attribuer une nouvelle valeur à la propriété Livewire directement à partir du fichier fournisseur sans avoir de méthode distincte dans le composant Livewire. 🎜🎜Voici le code : 🎜rrreee🎜Donc si votre propriété est une variable booléenne et que vous souhaitez avoir un bouton SHOW/FALSE, vous devez appeler $set et fournir deux paramètres : le nom de votre propriété et une nouvelle valeur. 🎜

  ---

  🎜🎜7. Allez plus loin : définissez facilement vrai/faux🎜Après le conseil précédent, si votre propriété est une variable booléenne avec vrai/faux et que vous souhaitez avoir un Afficher/Masquer le bouton, vous feriez ceci : 🎜rrreee🎜🎜 REMARQUE : Personnellement, j'éviterais d'utiliser Livewire pour ce simple effet de bascule, car il ajoute des requêtes supplémentaires au serveur. 🎜🎜Au lieu de cela, il est préférable d'utiliser du JavaScript, tel que Alpine.js : 🎜rrreee

  ---

  🎜🎜8. Trois façons de minimiser les requêtes du serveur🎜L'une des principales critiques de Livewire est qu'il place trop de requêtes sur le serveur. Si vous avez wire:model dans un champ de saisie, chaque frappe peut appeler le serveur pour restituer le composant. Ce serait très pratique si vous disposiez d'effets en temps réel, tels que Live Search. Mais généralement, les requêtes serveur peuvent être très coûteuses en termes de performances. 🎜🎜Cependant, il est très simple de personnaliser ce comportement de wire:model. 🎜
  • 🎜wire:model.debounce : par défaut, Livewire attend 150 millisecondes après la saisie d'une frappe avant de l'envoyer au serveur Exécuter la requête. Mais vous pouvez le remplacer : 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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!