Laravel Livewire를 어떻게 사용하나요? 공유할 수 있는 14가지 실용적인 팁

Laravel Livewire는 JavaScript 코드를 직접 작성하지 않고도 페이지에서 동적 동작을 구현하기 위한 훌륭한 도구입니다. 그리고 다른 도구와 마찬가지로 공식 문서와 개발자의 유용한 추가 팁을 포함하여 많은 "숨겨진 보석"이 있습니다. 나는 이 기사에서 그 중 일부를 편집하기로 결정했습니다. 시작해 봅시다!

1. 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 毫秒，然后再向服务器执行请求。 但您可以覆盖它：<input type="text" wire:model.debounce.1000ms="propertyName">일반적인 render() 메서드는 다음과 같습니다.

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

  🎜그러나 만약 render() 메서드는 🎜기본 보기를 렌더링하는 한 줄일 뿐입니다. 구성 요소에서 render() 메서드를 제거해도 여전히 유지됩니다. 작업, 공급자로부터의 메서드 로딩은 기본적으로 render()로 설정됩니다. [관련 권장사항: laravel 동영상 튜토리얼]🎜

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

  ---

  🎜🎜2 . 하위 폴더의 구성 요소🎜app/Http/Livewire/Folder/Component.php와 같은 하위 폴더에 구성 요소를 생성하려면 두 가지 방법이 있습니다. 🎜

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

  🎜 또는 🎜

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

  🎜 첫 번째 방법은 첫 글자를 대문자로 쓰는 것이고, 두 번째 방법은 소문자로 쓰는 것입니다. 두 경우 모두 🎜
  • app/Http/Livewire/Folder/Component.php
  • resources/views/livewire/folder/comComponent.blade
  🎜하위 폴더가 존재하지 않으면 자동으로 생성됩니다. 🎜

  ---

  🎜🎜3. 기본이 아닌 폴더의 구성 요소🎜 Livewire 구성 요소와 함께 일부 외부 패키지를 사용하는 경우 Livewire 구성 요소가 기본 와 동일한 폴더에 위치할 수 있습니다. app/Http/Livewire를 다른 폴더에 넣으세요. 이름을 실제 위치에 바인딩해야 할 수도 있습니다. 🎜🎜이 작업은 일반적으로 app/Providers/AppServiceProvider.php(또는 모든 서비스 공급자) 메서드 boot()에서 수행할 수 있습니다. 🎜

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

  ---

  🎜🎜4 . 구성 요소 이름을 쉽게 바꾸거나 이동할 수 있습니다.🎜 make:livewire를 사용하여 구성 요소를 생성할 때 오타가 있어도 걱정하지 마세요. 두 파일의 이름을 수동으로 바꿀 필요는 없습니다. 사용할 명령이 있습니다. 🎜🎜예를 들어, php artisan make:livewire Prduct를 작성했지만 "제품"을 원하고 하위 폴더에 넣기로 결정한 경우 다음 명령을 사용하여 개선할 수 있습니다: 🎜

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

  🎜 결과는 다음과 같습니다:🎜

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

  ---

  🎜🎜5. 기본 구성 요소 템플릿 변경🎜Livewire 구성 요소는 소위 "스텁"이라는 기본 템플릿을 사용하여 생성됩니다. Livewire 패키지의 "vendor" 폴더에 숨겨져 있지만 필요에 따라 게시하고 편집할 수 있습니다. 🎜🎜다음 명령을 실행하세요:🎜

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

  🎜일부 파일이 포함된 새 폴더 /stubs를 찾을 수 있습니다.
  stubs/livewire.stub의 예: 🎜

  class ShowPost extends Component{
      public Post $post;
  }

  🎜예를 들어 render() 메서드를 사용하지 않는 구성 요소를 생성하려면 다음을 수행하세요. 스텁 파일에서 이를 제거하고 php artisan make:livewire Component를 실행할 때마다 업데이트된 템플릿에서 "공개 스텁"을 가져옵니다. 🎜

  ---

  🎜🎜6. 단지 값을 설정하기 위한 메서드를 만들지 마세요🎜속성 값을 설정하는 Click 이벤트가 있는 경우 다음을 수행할 수 있습니다. 🎜

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

  🎜그러면 🎜

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

  🎜 그런데 실제로는 Livewire 컴포넌트에서 별도의 메소드 없이 Vendor 파일에서 직접 Livewire 속성에 새로운 값을 할당할 수 있습니다. 🎜🎜다음은 코드입니다: 🎜rrreee🎜따라서 속성이 부울 변수이고 SHOW/FALSE 버튼을 갖고 싶다면 $set를 호출하고 속성 이름이라는 두 가지 인수를 제공해야 합니다. 그리고 새로운 가치. 🎜

  ---

  🎜🎜7. 한 단계 더 나아가서 쉽게 true/false를 설정하세요.🎜이전 팁에 이어 속성이 true/false를 갖는 부울 변수이고 표시/숨기기 버튼을 사용하면 다음과 같습니다: 🎜rrreee🎜🎜 참고: 저는 개인적으로 서버에 추가 요청을 추가하므로 이 간단한 토글 효과에 Livewire를 사용하는 것을 피하고 싶습니다. 🎜🎜대신 Alpine.js와 같은 JavaScript를 사용하는 것이 더 좋습니다. 🎜rrreee

  ---

  🎜🎜8. 서버 요청을 최소화하는 세 가지 방법🎜 Livewire의 주요 비판 중 하나는 서버에 요청이 너무 많다는 것입니다. 입력 필드에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!