.jpg)
laravel Livewire是一個(gè)很好的工具，可以在頁面上實(shí)現(xiàn)動(dòng)態(tài)行為，無需直接編寫 JavaScript 代碼。而且，像任何工具一樣，它有很多「隱藏的寶石」，包括官方文檔和開發(fā)者提供的實(shí)用額外提示。我決定在這篇文章中匯編其中的一些。讓我們開始吧！
1. 不需要render()
典型的render()方法看起來像這樣：
//?app/http/Livewire/PostsShow.php class?PostsShow?extends?Component { ????public?function?render() ????{ ????????return?view('livewire.posts-show'); ????} }
但是，如果你的render()方法只是一個(gè)單行來呈現(xiàn) 默認(rèn) 視圖，您可以從組件中刪除該render()方法，它仍然可以工作，從供應(yīng)商的方法加載默認(rèn)為render()?！鞠嚓P(guān)推薦：laravel視頻教程】
class?PostsShow?extends?Component { ????//這個(gè)空組件仍將工作并加載Blade文件 }
2. 子文件夾中的組件
如果你想在子文件夾中生成一個(gè)組件，比如app/Http/Livewire/Folder/Component.php，你有兩種方法：
php?artisan?make:livewire?Folder/Component
或者
php?artisan?make:livewire?folder.component
請(qǐng)注意，第一種方式是第一個(gè)字母大寫，第二種方式是小寫。在這兩種情況下，都會(huì)生成兩個(gè)文件：
- app/Http/Livewire/Folder/Component.php
- resources/views/livewire/folder/component.blade.php
如果子文件夾不存在，將自動(dòng)創(chuàng)建它們。
3.非默認(rèn)文件夾中的組件
如果您將某些外部包與 Livewire 組件一起使用，則您的 Livewire 組件可能位于與默認(rèn)的 app/Http/Livewire 不同的文件夾中。您可能需要將其名稱綁定到實(shí)際位置。
通?？梢栽赼pp/Providers/AppServiceProvider.php（或任何服務(wù)提供者）方法boot()中完成：
class?AppServiceProvider?extends?ServiceProvider { ????public?function?boot() ????{ ????????Livewire::component('shopping-cart',?ModulesShopHttpLivewireCart::class); ????} }
4.輕松重命名或移動(dòng)組件
如果您在使用 make:livewire 生成組件時(shí)打錯(cuò)字，請(qǐng)不要擔(dān)心。您不需要手動(dòng)重命名兩個(gè)文件，有一個(gè)命令供我們使用。
例如，如果您編寫了php artisan make:livewire Prduct，但您想要「Product」，并且還決定將其放入子文件夾中，則可以使用以下命令進(jìn)行改進(jìn)：
php?artisan?livewire:move?Prduct?Products/Show
結(jié)果將是這樣的：
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.更改默認(rèn)組件模板
Livewire 組件是使用默認(rèn)模板生成的，即所謂的「存根」。它們隱藏在 Livewire 包的「vendor」文件夾中，但您也可以根據(jù)需要發(fā)布和編輯它們。
Run this command:
php?artisan?livewire:stubs
您會(huì)找到一個(gè)新文件夾 /stubs，其中包含一些文件。
stubs/livewire.stub 的示例：
<?php namespace [namespace]; use LivewireComponent; class [class] extends Component { public function render() { return view('[view]'); } }
例如，如果您想生成不使用 render() 方法的組件，只需將其從存根文件中刪除，然后每次運(yùn)行 php artisan make:livewire Component，它都會(huì)從您更新的模板中獲取「公共存根」。
6. 不要為了設(shè)置值而創(chuàng)建方法
如果您有一個(gè)會(huì)設(shè)置某個(gè)屬性的某個(gè)值的Click事件，您可以這樣：
<button>Show</button>
然后
class?Show?extends?Component { ????public?$showText?=?false; ????public?function?showText()?{ ????????$this->showText?=?true; ????} }
但實(shí)際上，您可以直接從vender文件為L(zhǎng)ivewire屬性賦一個(gè)新值，而不需要在Livewire組件中有單獨(dú)的方法。
以下是代碼：
<button>Show</button>
因此，如果您的屬性是一個(gè)布爾變量，并且希望有一個(gè)顯示/FALSE按鈕，則您需要調(diào)用$set并提供兩個(gè)參數(shù)：您的屬性名稱和新值。
7. 更進(jìn)一步：輕松設(shè)置 true/false
在上一個(gè)技巧之后，如果您的屬性是一個(gè)帶有true/false的布爾變量，并且您想要有一個(gè)顯示/隱藏按鈕，您可以這樣：
<button>Show/Hide</button>
注意：我個(gè)人會(huì)避免使用 Livewire 來實(shí)現(xiàn)這種簡(jiǎn)單的切換效果，因?yàn)樗鼤?huì)向服務(wù)器添加額外的請(qǐng)求。
相反，最好使用 JavaScript，例如 laravel視頻教程：
<div> ????<button>Expand</button> ????<span> ??????Content... ????</span> </div>
8. 最小化服務(wù)器請(qǐng)求的三種方法
Livewire 的主要詬病之一是它對(duì)服務(wù)器的請(qǐng)求太多。如果您在輸入字段中有wire:model，則每次擊鍵都可能會(huì)調(diào)用服務(wù)器以重新渲染組件。如果您有一些實(shí)時(shí)效果，例如「實(shí)時(shí)搜索」，那將非常方便。但通常，就性能而言，服務(wù)器請(qǐng)求可能非常昂貴。
但是，自定義 wire:model 的這種行為非常容易。
-
wire:model.debounce：默認(rèn)情況下，Livewire 在輸入按鍵后等待 150 毫秒，然后再向服務(wù)器執(zhí)行請(qǐng)求。 但您可以覆蓋它：
-
wire:model.lazy：默認(rèn)情況下，Livewire 會(huì)監(jiān)聽輸入上的所有**事件，然后執(zhí)行服務(wù)器請(qǐng)求。 通過提供 lazy 指令，您可以告訴 Livewire 僅監(jiān)聽 change 事件。 這意味著用戶可以繼續(xù)輸入和更改，并且只有當(dāng)用戶點(diǎn)擊離開該字段時(shí)才會(huì)觸發(fā)服務(wù)器請(qǐng)求。
-
wire:model.defer：這不會(huì)在輸入更改時(shí)觸發(fā)服務(wù)器請(qǐng)求。 它將在內(nèi)部保存新值并將其傳遞給下一個(gè)網(wǎng)絡(luò)請(qǐng)求，該請(qǐng)求可能來自其他輸入字段或其他按鈕的點(diǎn)擊。
9.自定義驗(yàn)證屬性
Livewire 驗(yàn)證的工作方式與 Laravel 驗(yàn)證引擎非常相似，但有一些不同之處。在 Laravel 中，如果你想自定義屬性的名稱，你可以laravel視頻教程 在表單請(qǐng)求類中。
在 Livewire 中，方法不同。 在組件中，您需要定義一個(gè)名為「$validationAttributes」的屬性并在那里分配鍵值數(shù)組：
class?ContactForm?extends?Component { ????protected?$validationAttributes?=?[ ????????'email'?=>?'email?address' ????]; ????//?... }
這對(duì)于常見的錯(cuò)誤消息很有用，例如「需要字段 XYZ」。默認(rèn)情況下，該 XYZ 被替換為字段名稱，用戶可能不會(huì)理解這個(gè)的詞，因此應(yīng)該將其替換為更清晰的錯(cuò)誤消息。
10. 加載提示
從我所見，官方文檔中描述但很少使用的東西。如果某些動(dòng)作在屏幕上需要一段時(shí)間，則應(yīng)該顯示一些加載指示符，例如旋轉(zhuǎn)的 gif，或者只是「正在加載數(shù)據(jù)…」的文本
在 Livewire 中，它不僅易于實(shí)現(xiàn)，而且還易于定制。
處理數(shù)據(jù)的最簡(jiǎn)單示例：當(dāng)服務(wù)器發(fā)出請(qǐng)求時(shí)，它將顯示「正在處理付款…」文本，直到服務(wù)器請(qǐng)求完成并返回結(jié)果。
<div> ????<button>Checkout</button> ????<div> ????????Processing?Payment... ????</div> </div>
在實(shí)踐中，我喜歡僅在需要一段時(shí)間時(shí)才顯示此類加載指示器。在所有可能的情況下，每次都重新渲染 dom 是沒有意義的。 如果我們只在請(qǐng)求時(shí)間超過 500 毫秒時(shí)才這樣做呢？
這很簡(jiǎn)單：
<div>...</div>
還有可能使用 css 類來加載狀態(tài)，將它們附加到特定的操作，等等：閱讀 [官方文檔](laravel視頻教程 #states#toggling-elements）。
11. 離線指示器
Livewire 的另一個(gè)記錄在案但鮮為人知的功能是告訴用戶他們的互聯(lián)網(wǎng)連接是否丟失。如果您的應(yīng)用程序使用實(shí)時(shí)數(shù)據(jù)或屏幕上的多次更新，這將是非常有用的：您可能會(huì)模糊網(wǎng)頁的某些部分并顯示「離線」文本。
這也很簡(jiǎn)單：
<div> ????You?are?now?offline. </div>
此外，正如我所提到的，您可以通過分配 CSS 類來模糊某些元素，如下所示：
<div></div>
12. 使用 bootstrap 框架分頁
與 Laravel 類似，Livewire 默認(rèn)使用來自 Tailwind 框架的分頁樣式。 幸運(yùn)的是，它很容易覆蓋，只需為屬性提供不同的值：
class?ShowPosts?extends?Component { ????use?WithPagination; ????protected?$paginationTheme?=?'bootstrap';
您可以直接在 laravel視頻教程 中查看可用的分頁設(shè)計(jì)。 在瀏覽時(shí)，我沒有找到任何關(guān)于使用 Bootstrap 4 還是 Bootstrap 5 版本的信息。
13. No Mount：自動(dòng)路由模型綁定
如果您想將對(duì)象傳遞給 Livewire 組件，這是一種典型的方法，使用 mount() 方法：
class?ShowPost?extends?Component{ ????public?$post; ????public?function?mount(Post?$post) ????{ ????????$this->post?=?$post; ????} }
然后，在 Blade 的某個(gè)地方，使用：
@livewire('show-post',?$post)
但是您是否知道，如果您為 Livewire 屬性提供類型提示，路由模型綁定會(huì)自動(dòng)生效？
class?ShowPost?extends?Component{ ????public?Post?$post; }
就是這樣，根本不需要mount()方法。
14.刪除時(shí)的確認(rèn)提示
如果您有一個(gè)「刪除」按鈕，并且您想在執(zhí)行操作之前調(diào)用確認(rèn)彈窗在 JavaScript 中，則此代碼將無法在 Livewire 中正常工作：
<button>id)" ????????onclick="return?confirm('Are?you?sure?')">Delete</button>
對(duì)此有一些可能的解決方案，可能最優(yōu)雅的方法是在 Livewire 事件發(fā)生之前停止它：
<button>id)">Delete</button>
Event.stopImmediatePropagation() 如果確認(rèn)結(jié)果是假的，將停止調(diào)用LiveWire方法。
您可以在laravel視頻教程中找到一些其他可能的解決方案.
就是這樣，一些LiveWire特征和小提示。希望對(duì)大家有用！
原文地址：https://laravel-news.com/laravel-livewire-tips-and-tricks譯文地址：https://learnku.com/laravel/t/66995
更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：laravel視頻教程?。?/p>
.png)
