laravel Livewire是一個很好的工具，可以在頁面上實現動態行為，無需直接編寫 JavaScript 代碼。而且，像任何工具一樣，它有很多「隱藏的寶石」，包括官方文檔和開發者提供的實用額外提示。我決定在這篇文章中匯編其中的一些。讓我們開始吧！
1. 不需要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',?ModulesShopHttpLivewireCart::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 LivewireComponent; class [class] extends Component { public function render() { return view('[view]'); } }
例如，如果您想生成不使用 render() 方法的組件，只需將其從存根文件中刪除，然后每次運行 php artisan make:livewire Component，它都會從您更新的模板中獲取「公共存根」。
6. 不要為了設置值而創建方法
如果您有一個會設置某個屬性的某個值的Click事件，您可以這樣：
<button>Show</button>
然后
class?Show?extends?Component { ????public?$showText?=?false; ????public?function?showText()?{ ????????$this->showText?=?true; ????} }
但實際上，您可以直接從vender文件為Livewire屬性賦一個新值，而不需要在Livewire組件中有單獨的方法。
以下是代碼：
<button>Show</button>
因此，如果您的屬性是一個布爾變量，并且希望有一個顯示/FALSE按鈕，則您需要調用$set并提供兩個參數：您的屬性名稱和新值。
7. 更進一步：輕松設置 true/false
在上一個技巧之后，如果您的屬性是一個帶有true/false的布爾變量，并且您想要有一個顯示/隱藏按鈕，您可以這樣：
<button>Show/Hide</button>
注意：我個人會避免使用 Livewire 來實現這種簡單的切換效果，因為它會向服務器添加額外的請求。
相反，最好使用 JavaScript，例如 laravel視頻教程：
<div> ????<button>Expand</button> ????<span> ??????Content... ????</span> </div>
8. 最小化服務器請求的三種方法
Livewire 的主要詬病之一是它對服務器的請求太多。如果您在輸入字段中有wire:model，則每次擊鍵都可能會調用服務器以重新渲染組件。如果您有一些實時效果，例如「實時搜索」，那將非常方便。但通常，就性能而言，服務器請求可能非常昂貴。
但是，自定義 wire:model 的這種行為非常容易。
-
wire:model.debounce：默認情況下，Livewire 在輸入按鍵后等待 150 毫秒，然后再向服務器執行請求。 但您可以覆蓋它：
-
wire:model.lazy：默認情況下，Livewire 會監聽輸入上的所有**事件，然后執行服務器請求。 通過提供 lazy 指令，您可以告訴 Livewire 僅監聽 change 事件。 這意味著用戶可以繼續輸入和更改，并且只有當用戶點擊離開該字段時才會觸發服務器請求。
-
wire:model.defer：這不會在輸入更改時觸發服務器請求。 它將在內部保存新值并將其傳遞給下一個網絡請求，該請求可能來自其他輸入字段或其他按鈕的點擊。
9.自定義驗證屬性
Livewire 驗證的工作方式與 Laravel 驗證引擎非常相似，但有一些不同之處。在 Laravel 中，如果你想自定義屬性的名稱，你可以laravel視頻教程 在表單請求類中。
在 Livewire 中，方法不同。 在組件中，您需要定義一個名為「$validationAttributes」的屬性并在那里分配鍵值數組：
class?ContactForm?extends?Component { ????protected?$validationAttributes?=?[ ????????'email'?=>?'email?address' ????]; ????//?... }
這對于常見的錯誤消息很有用，例如「需要字段 XYZ」。默認情況下，該 XYZ 被替換為字段名稱，用戶可能不會理解這個的詞，因此應該將其替換為更清晰的錯誤消息。
10. 加載提示
從我所見，官方文檔中描述但很少使用的東西。如果某些動作在屏幕上需要一段時間，則應該顯示一些加載指示符，例如旋轉的 gif，或者只是「正在加載數據…」的文本
在 Livewire 中，它不僅易于實現，而且還易于定制。
處理數據的最簡單示例：當服務器發出請求時，它將顯示「正在處理付款…」文本，直到服務器請求完成并返回結果。
<div> ????<button>Checkout</button> ????<div> ????????Processing?Payment... ????</div> </div>
在實踐中，我喜歡僅在需要一段時間時才顯示此類加載指示器。在所有可能的情況下，每次都重新渲染 dom 是沒有意義的。 如果我們只在請求時間超過 500 毫秒時才這樣做呢？
這很簡單：
<div>...</div>
還有可能使用 css 類來加載狀態，將它們附加到特定的操作，等等：閱讀 [官方文檔](laravel視頻教程 #states#toggling-elements）。
11. 離線指示器
Livewire 的另一個記錄在案但鮮為人知的功能是告訴用戶他們的互聯網連接是否丟失。如果您的應用程序使用實時數據或屏幕上的多次更新，這將是非常有用的：您可能會模糊網頁的某些部分并顯示「離線」文本。
這也很簡單：
<div> ????You?are?now?offline. </div>
此外，正如我所提到的，您可以通過分配 CSS 類來模糊某些元素，如下所示：
<div></div>
12. 使用 bootstrap 框架分頁
與 Laravel 類似，Livewire 默認使用來自 Tailwind 框架的分頁樣式。 幸運的是，它很容易覆蓋，只需為屬性提供不同的值：
class?ShowPosts?extends?Component { ????use?WithPagination; ????protected?$paginationTheme?=?'bootstrap';
您可以直接在 laravel視頻教程 中查看可用的分頁設計。 在瀏覽時，我沒有找到任何關于使用 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>id)" ????????onclick="return?confirm('Are?you?sure?')">Delete</button>
對此有一些可能的解決方案，可能最優雅的方法是在 Livewire 事件發生之前停止它：
<button>id)">Delete</button>
Event.stopImmediatePropagation() 如果確認結果是假的，將停止調用LiveWire方法。
您可以在laravel視頻教程中找到一些其他可能的解決方案.
就是這樣，一些LiveWire特征和小提示。希望對大家有用！
原文地址：https://laravel-news.com/laravel-livewire-tips-and-tricks譯文地址：https://learnku.com/laravel/t/66995
更多編程相關知識，請訪問：laravel視頻教程！！
