這篇文章主要講解了“Laravel Livewire如何使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Laravel Livewire如何使用”吧！

為上高等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及上高網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、網(wǎng)站制作、上高網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

Laravel Livewire是一個很好的工具，可以在頁面上實現(xiàn)動態(tài)行為，無需直接編寫 JavaScript 代碼。而且，像任何工具一樣，它有很多「隱藏的寶石」，包括官方文檔和開發(fā)者提供的實用額外提示。

1. 不需要render()

典型的render()方法看起來像這樣：

// app/Http/Livewire/PostsShow.php
class PostsShow extends Component
{
    public function render()
    {
        return view('livewire.posts-show');
    }
}

但是，如果你的render()方法只是一個單行來呈現(xiàn) 默認視圖，您可以從組件中刪除該render()方法，它仍然可以工作，從供應商的方法加載默認為render()?！鞠嚓P推薦：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

如果子文件夾不存在，將自動創(chuàng)建它們。

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」文件夾中，但您也可以根據(jù)需要發(fā)布和編輯它們。

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. 不要為了設置值而創(chuàng)建方法

如果您有一個會設置某個屬性的某個值的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按鈕，則您需要調(diào)用$set并提供兩個參數(shù)：您的屬性名稱和新值。

7. 更進一步：輕松設置 true/false

在上一個技巧之后，如果您的屬性是一個帶有true/false的布爾變量，并且您想要有一個顯示/隱藏按鈕，您可以這樣：

<button wire:click="$toggle('showText')">Show/Hide</button>

注意：我個人會避免使用 Livewire 來實現(xiàn)這種簡單的切換效果，因為它會向服務器添加額外的請求。

相反，最好使用 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，則每次擊鍵都可能會調(diào)用服務器以重新渲染組件。如果您有一些實時效果，例如「實時搜索」，那將非常方便。但通常，就性能而言，服務器請求可能非常昂貴。

但是，自定義 wire:model 的這種行為非常容易。

• wire:model.debounce：默認情況下，Livewire 在輸入按鍵后等待 150 毫秒，然后再向服務器執(zhí)行請求。 但您可以覆蓋它：<input type="text" wire:model.debounce.1000ms="propertyName">

• wire:model.lazy：默認情況下，Livewire 會監(jiān)聽輸入上的所有**事件，然后執(zhí)行服務器請求。 通過提供 lazy 指令，您可以告訴 Livewire 僅監(jiān)聽 change 事件。 這意味著用戶可以繼續(xù)輸入和更改，并且只有當用戶點擊離開該字段時才會觸發(fā)服務器請求。

• wire:model.defer：這不會在輸入更改時觸發(fā)服務器請求。 它將在內(nèi)部保存新值并將其傳遞給下一個網(wǎng)絡請求，該請求可能來自其他輸入字段或其他按鈕的點擊。

9.自定義驗證屬性

Livewire 驗證的工作方式與 Laravel 驗證引擎非常相似，但有一些不同之處。在 Laravel 中，如果你想自定義屬性的名稱，你可以定義 attributes() 方法 在表單請求類中。

在 Livewire 中，方法不同。 在組件中，您需要定義一個名為「$validationAttributes」的屬性并在那里分配鍵值數(shù)組：

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

    // ...
}

這對于常見的錯誤消息很有用，例如「需要字段 XYZ」。默認情況下，該 XYZ 被替換為字段名稱，用戶可能不會理解這個的詞，因此應該將其替換為更清晰的錯誤消息。

10. 加載提示

從我所見，官方文檔中描述但很少使用的東西。如果某些動作在屏幕上需要一段時間，則應該顯示一些加載指示符，例如旋轉的 gif，或者只是「正在加載數(shù)據(jù)…」的文本

在 Livewire 中，它不僅易于實現(xiàn)，而且還易于定制。

處理數(shù)據(jù)的最簡單示例：當服務器發(fā)出請求時，它將顯示「正在處理付款…」文本，直到服務器請求完成并返回結果。

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading>
        Processing Payment...
    </div>
</div>

在實踐中，我喜歡僅在需要一段時間時才顯示此類加載指示器。在所有可能的情況下，每次都重新渲染 DOM 是沒有意義的。 如果我們只在請求時間超過 500 毫秒時才這樣做呢？

這很簡單：

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

還有可能使用 CSS 類來加載狀態(tài)，將它們附加到特定的操作，等等。

11. 離線指示器

Livewire 的另一個記錄在案但鮮為人知的功能是告訴用戶他們的互聯(lián)網(wǎng)連接是否丟失。如果您的應用程序使用實時數(shù)據(jù)或屏幕上的多次更新，這將是非常有用的：您可能會模糊網(wǎng)頁的某些部分并顯示「離線」文本。

這也很簡單：

<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.刪除時的確認提示

如果您有一個「刪除」按鈕，并且您想在執(zhí)行操作之前調(diào)用確認彈窗在 JavaScript 中，則此代碼將無法在 Livewire 中正常工作：

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

對此有一些可能的解決方案，可能最優(yōu)雅的方法是在 Livewire 事件發(fā)生之前停止它：

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

event.stopImmediatePropagation() 如果確認結果是假的，將停止調(diào)用LiveWire方法。

您可以在this Github issue discussion中找到一些其他可能的解決方案.

感謝各位的閱讀，以上就是“Laravel Livewire如何使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Laravel Livewire如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

當前名稱：LaravelLivewire如何使用
文章鏈接：http://aaarwkj.com/article36/pdhspg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站制作、做網(wǎng)站、網(wǎng)站營銷、全網(wǎng)營銷推廣、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)