LaravelLivewire如何使用

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

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

Laravel Livewire是一個(gè)很好的工具，可以在頁面上實(shí)現(xiàn)動態(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

請注意，第一種方式是第一個(gè)字母大寫，第二種方式是小寫。在這兩種情況下，都會生成兩個(gè)文件：

app/Http/Livewire/Folder/Component.php
resources/views/livewire/folder/component.blade.php

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

3.非默認(rèn)文件夾中的組件

如果您將某些外部包與 Livewire 組件一起使用，則您的 Livewire 組件可能位于與默認(rèn)的 app/Http/Livewire 不同的文件夾中。您可能需要將其名稱綁定到實(shí)際位置。

通常可以在app/Providers/AppServiceProvider.php（或任何服務(wù)提供者）方法boot()中完成：

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Livewire::component('shopping-cart', \Modules\Shop\Http\Livewire\Cart::class);
    }
}

4.輕松重命名或移動組件

如果您在使用 make:livewire 生成組件時(shí)打錯(cuò)字，請不要擔(dān)心。您不需要手動重命名兩個(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

您會找到一個(gè)新文件夾 /stubs，其中包含一些文件。
stubs/livewire.stub 的示例：

<?php

namespace [namespace];

use Livewire\Component;

class [class] extends Component
{
    public function render()
    {
        return view('[view]');
    }
}

例如，如果您想生成不使用 render() 方法的組件，只需將其從存根文件中刪除，然后每次運(yùn)行 php artisan make:livewire Component，它都會從您更新的模板中獲取「公共存根」。

6. 不要為了設(shè)置值而創(chuàng)建方法

如果您有一個(gè)會設(shè)置某個(gè)屬性的某個(gè)值的Click事件，您可以這樣：

<button wire:click="showText">Show</button>

然后

class Show extends Component
{
    public $showText = false;

    public function showText() {
        $this->showText = true;
    }
}

但實(shí)際上，您可以直接從vender文件為Livewire屬性賦一個(gè)新值，而不需要在Livewire組件中有單獨(dú)的方法。

以下是代碼：

<button wire:click="$set('showText', true)">Show</button>

因此，如果您的屬性是一個(gè)布爾變量，并且希望有一個(gè)顯示/FALSE按鈕，則您需要調(diào)用$set并提供兩個(gè)參數(shù)：您的屬性名稱和新值。

7. 更進(jìn)一步：輕松設(shè)置 true/false

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

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

注意：我個(gè)人會避免使用 Livewire 來實(shí)現(xiàn)這種簡單的切換效果，因?yàn)樗鼤?a title="服務(wù)器" target="_blank" >服務(wù)器添加額外的請求。

相反，最好使用 JavaScript，例如 Alpine.js：

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>

    <span x-show="open">
      Content...
    </span>
</div>

8. 最小化服務(wù)器請求的三種方法

Livewire 的主要詬病之一是它對服務(wù)器的請求太多。如果您在輸入字段中有wire:model，則每次擊鍵都可能會調(diào)用服務(wù)器以重新渲染組件。如果您有一些實(shí)時(shí)效果，例如「實(shí)時(shí)搜索」，那將非常方便。但通常，就性能而言，服務(wù)器請求可能非常昂貴。

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

wire:model.debounce：默認(rèn)情況下，Livewire 在輸入按鍵后等待 150 毫秒，然后再向服務(wù)器執(zhí)行請求。但您可以覆蓋它：<input type="text" wire:model.debounce.1000ms="propertyName">
wire:model.lazy：默認(rèn)情況下，Livewire 會監(jiān)聽輸入上的所有**事件，然后執(zhí)行服務(wù)器請求。通過提供 lazy 指令，您可以告訴 Livewire 僅監(jiān)聽 change 事件。這意味著用戶可以繼續(xù)輸入和更改，并且只有當(dāng)用戶點(diǎn)擊離開該字段時(shí)才會觸發(fā)服務(wù)器請求。
wire:model.defer：這不會在輸入更改時(shí)觸發(fā)服務(wù)器請求。它將在內(nèi)部保存新值并將其傳遞給下一個(gè)網(wǎng)絡(luò)請求，該請求可能來自其他輸入字段或其他按鈕的點(diǎn)擊。

9.自定義驗(yàn)證屬性

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

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

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

    // ...
}

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

10. 加載提示

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

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

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

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

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

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

這很簡單：

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

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

11. 離線指示器

Livewire 的另一個(gè)記錄在案但鮮為人知的功能是告訴用戶他們的互聯(lián)網(wǎng)連接是否丟失。如果您的應(yīng)用程序使用實(shí)時(shí)數(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 默認(rèn)使用來自 Tailwind 框架的分頁樣式。幸運(yùn)的是，它很容易覆蓋，只需為屬性提供不同的值：

class ShowPosts extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

您可以直接在 Livewire Github 存儲庫中查看可用的分頁設(shè)計(jì)。在瀏覽時(shí)，我沒有找到任何關(guān)于使用 Bootstrap 4 還是 Bootstrap 5 版本的信息。

13. No Mount：自動路由模型綁定

如果您想將對象傳遞給 Livewire 組件，這是一種典型的方法，使用 mount() 方法：

class ShowPost extends Component{
    public $post;

    public function mount(Post $post)
    {
        $this->post = $post;
    }
}

然后，在 Blade 的某個(gè)地方，使用：

@livewire('show-post', $post)

但是您是否知道，如果您為 Livewire 屬性提供類型提示，路由模型綁定會自動生效？

class ShowPost extends Component{
    public Post $post;
}

就是這樣，根本不需要mount()方法。

14.刪除時(shí)的確認(rèn)提示

如果您有一個(gè)「刪除」按鈕，并且您想在執(zhí)行操作之前調(diào)用確認(rèn)彈窗在 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() 如果確認(rèn)結(jié)果是假的，將停止調(diào)用LiveWire方法。

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

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

當(dāng)前名稱：LaravelLivewire如何使用
文章鏈接：http://muchs.cn/article36/pdhspg.html

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

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

猜你還喜歡下面的內(nèi)容