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', \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('[view]'); } }例如,如果您想要產生不使用
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('showText', true)">Show</button>因此,如果您的屬性是布林變量,並且希望有一個顯示/FALSE按鈕,則您需要呼叫
$set並提供兩個參數:您的屬性名稱和新值。
7. 更進一步:輕鬆設定true/false
在上一個技巧之後,如果您的屬性是一個帶有true/false的布爾變量,並且您想要有一個顯示/隱藏按鈕,您可以這樣:<button wire:click="$toggle('showText')">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 毫秒,然後再向伺服器執行請求。但您可以覆寫它:
#
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('Are you sure?')">Delete</button>
对此有一些可能的解决方案,可能最优雅的方法是在 Livewire 事件发生之前停止它:
<button onclick="confirm('Are you sure?') || 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中文網其他相關文章!

Laravel受歡迎的原因包括其簡化開發過程、提供愉快的開發環境和豐富的功能。 1)它吸收了RubyonRails的設計理念,結合PHP的靈活性。 2)提供瞭如EloquentORM、Blade模板引擎等工具,提高開發效率。 3)其MVC架構和依賴注入機制使代碼更加模塊化和可測試。 4)提供了強大的調試工具和性能優化方法,如緩存系統和最佳實踐。

Django和Laravel都是全棧框架,Django適合Python開發者和復雜業務邏輯,Laravel適合PHP開發者和優雅語法。 1.Django基於Python,遵循“電池齊全”哲學,適合快速開發和高並發。 2.Laravel基於PHP,強調開發者體驗,適合小型到中型項目。

PHP和Laravel不是直接可比的,因為Laravel是基於PHP的框架。 1.PHP適合小型項目或快速原型開發,因其簡單直接。 2.Laravel適合大型項目或高效開發,因其提供豐富功能和工具,但學習曲線較陡,性能可能不如純PHP。

laravelisabackendframeworkbuiltonphp,設計ForweBapplicationDevelopment.itfocusessonserver-sideLogic,databasemagemention和Applicationstructure和CanBeintegratedWithFrontendTechnologiesLikeLikeVue.jsorreActeReacterVue.jsorreActforforfull-stackDevefloct。

本文討論了Laravel中的創建和使用自定義刀片指令以增強模板。它涵蓋了定義指令,在模板中使用它們,並在大型項目中管理它們,強調了改進的代碼可重複性和R等好處

本文討論了使用組件在Laravel中創建和自定義可重複使用的UI元素,從而為組織提供最佳實踐並建議增強包裝。

文章討論了使用Laravel的路由來創建SEO友好的URL,涵蓋最佳實踐,規範的URL和SEO優化工具。WordCount:159

Laravel的工匠控制台可以自動化任務,例如生成代碼,運行遷移和調度。關鍵命令包括:控制器,遷移和DB:種子。可以為特定需求創建自定義命令,增強工作流效率。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

Atom編輯器mac版下載
最受歡迎的的開源編輯器

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3漢化版
中文版,非常好用