搜尋
首頁php框架LaravelLaravel Livewire怎麼用? 14個實用技巧分享

Laravel Livewire怎麼用? 14個實用技巧分享

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(&#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 毫秒,然後再向伺服器執行請求。但您可以覆寫它:#

  • wire:model.lazy:默认情况下,Livewire 会监听输入上的所有**事件,然后执行服务器请求。 通过提供 lazy 指令,您可以告诉 Livewire 仅监听 change 事件。 这意味着用户可以继续输入和更改,并且只有当用户点击离开该字段时才会触发服务器请求。

  • wire:model.defer:这不会在输入更改时触发服务器请求。 它将在内部保存新值并将其传递给下一个网络请求,该请求可能来自其他输入字段或其他按钮的点击。


9.自定义验证属性

Livewire 验证的工作方式与 Laravel 验证引擎非常相似,但有一些不同之处。在 Laravel 中,如果你想自定义属性的名称,你可以定义 attributes() 方法 在表单请求类中。

在 Livewire 中,方法不同。 在组件中,您需要定义一个名为「$validationAttributes」的属性并在那里分配键值数组:

class ContactForm extends Component
{
    protected $validationAttributes = [
        &#39;email&#39; => &#39;email address&#39;
    ];

    // ...
}

这对于常见的错误消息很有用,例如「需要字段 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 = &#39;bootstrap&#39;;

您可以直接在 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(&#39;show-post&#39;, $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中文網其他相關文章!

陳述
本文轉載於:learnku。如有侵權,請聯絡admin@php.cn刪除
php怎么把负数转为正整数php怎么把负数转为正整数Apr 19, 2022 pm 08:59 PM

php把负数转为正整数的方法:1、使用abs()函数将负数转为正数,使用intval()函数对正数取整,转为正整数,语法“intval(abs($number))”;2、利用“~”位运算符将负数取反加一,语法“~$number + 1”。

php怎么实现几秒后执行一个函数php怎么实现几秒后执行一个函数Apr 24, 2022 pm 01:12 PM

实现方法:1、使用“sleep(延迟秒数)”语句,可延迟执行函数若干秒;2、使用“time_nanosleep(延迟秒数,延迟纳秒数)”语句,可延迟执行函数若干秒和纳秒;3、使用“time_sleep_until(time()+7)”语句。

php怎么除以100保留两位小数php怎么除以100保留两位小数Apr 22, 2022 pm 06:23 PM

php除以100保留两位小数的方法:1、利用“/”运算符进行除法运算,语法“数值 / 100”;2、使用“number_format(除法结果, 2)”或“sprintf("%.2f",除法结果)”语句进行四舍五入的处理值,并保留两位小数。

php怎么根据年月日判断是一年的第几天php怎么根据年月日判断是一年的第几天Apr 22, 2022 pm 05:02 PM

判断方法:1、使用“strtotime("年-月-日")”语句将给定的年月日转换为时间戳格式;2、用“date("z",时间戳)+1”语句计算指定时间戳是一年的第几天。date()返回的天数是从0开始计算的,因此真实天数需要在此基础上加1。

php怎么替换nbsp空格符php怎么替换nbsp空格符Apr 24, 2022 pm 02:55 PM

方法:1、用“str_replace("&nbsp;","其他字符",$str)”语句,可将nbsp符替换为其他字符;2、用“preg_replace("/(\s|\&nbsp\;||\xc2\xa0)/","其他字符",$str)”语句。

php怎么判断有没有小数点php怎么判断有没有小数点Apr 20, 2022 pm 08:12 PM

php判断有没有小数点的方法:1、使用“strpos(数字字符串,'.')”语法,如果返回小数点在字符串中第一次出现的位置,则有小数点;2、使用“strrpos(数字字符串,'.')”语句,如果返回小数点在字符串中最后一次出现的位置,则有。

php字符串有没有下标php字符串有没有下标Apr 24, 2022 am 11:49 AM

php字符串有下标。在PHP中,下标不仅可以应用于数组和对象,还可应用于字符串,利用字符串的下标和中括号“[]”可以访问指定索引位置的字符,并对该字符进行读写,语法“字符串名[下标值]”;字符串的下标值(索引值)只能是整数类型,起始值为0。

php怎么读取字符串后几个字符php怎么读取字符串后几个字符Apr 22, 2022 pm 08:31 PM

在php中,可以使用substr()函数来读取字符串后几个字符,只需要将该函数的第二个参数设置为负值,第三个参数省略即可;语法为“substr(字符串,-n)”,表示读取从字符串结尾处向前数第n个字符开始,直到字符串结尾的全部字符。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境