Laravel 元件

飞龙在生發表於2024-07-16
Laravel元件

建立元件命令

php artisan make:component Alert

make:component 命令還將為元件建立檢視模板。檢視將放在 resources/views/components 目錄中。為自己的應用程式編寫元件時，元件會在 app/View/components 目錄和 resources/views/components 目錄中自動發現，因此通常不需要進一步的元件註冊。

也可以在子目錄中建立元件：
php artisan make:component Forms/Input
上面的命令將在 App\View\Components\Forms 目錄中建立一個 Input 元件，該檢視將放在 resources/views/Components/Forms 目錄中。

渲染元件
要顯示元件，可以在其中一個 Blade 模板中使用 Blade 元件標記。Blade 元件標記以字串 x- 開頭，後跟元件類的蛇形名稱：
<x-alert/> 或者 <x-alert></x-alert>
<x-user-profile/> 或者 <x-user-profile/> </x-user-profile>
如果元件類巢狀在 App\View\Components 目錄的更深處，則可以使用 . 字元表示目錄巢狀。例如，如果我們假設一個元件位於 App\View\Components\Forms\Input.php ，我們可以這樣處理：
<x-forms.input/>

給元件傳遞資料
可以使用 HTML 屬性將資料傳遞給 Blade 元件。硬編碼、原始值可以使用簡單的 HTML 屬性字串傳遞給元件。PHP 表示式和變數應透過使用 : 字元作為字首的屬性傳遞給元件：
<x-alert type="error" :message="$message"/>
你應該在元件類的建構函式中定義元件所需的資料。元件上的所有公共屬性將自動提供給元件的檢視。不必從元件的 render 方法將資料傳遞到檢視。以下是app/View/components目錄下的Alert.php檔案。

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * The alert type.
     *
     * @var string
     */
    public $type;

    /**
     * The alert message.
     *
     * @var string
     */
    public $message;

    /**
     * 建立元件例項
     *
     * @param  string  $type
     * @param  string  $message
     * @return void
     */
    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * 將一個檢視或者字串傳遞給元件用於渲染
     *
     * @return \Illuminate\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

　　渲染元件時，可以透過按名稱回顯變數來顯示元件公共變數的內容：

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

　　

駝峰命名

應使用 camelCase 指定元件建構函式引數，而在 HTML 屬性中引用引數名稱時應使用 kebab-case。例如，給定以下元件建構函式：

/**
 * 建立元件例項
 *
 * @param  string  $alertType
 * @return void
 */
public function __construct($alertType)
{
    $this->alertType = $alertType;
}

　　

$alertType 引數可以使用如下所示的方式接受資料：
<x-alert alert-type="danger" />

訪問元件類中的屬性和插槽
Blade 元件還允許你訪問類的 render 方法中的元件名稱、屬性和插槽。但是，為了訪問這些資料，應該從元件的 render 方法返回閉包。閉包將接收一個 $data 陣列作為它的唯一引數。此陣列將包含幾個元素，這些元素提供有關元件的資訊：

/**
 * 獲取表示元件的檢視/內容
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return function (array $data) {
        // $data['componentName'];
        // $data['attributes'];
        // $data['slot'];
                 return 'components.alert';

        return '<div>Components content</div>';

        return <<<'blade'
                <div class="alert alert-danger">
                    {{ $message }}
                </div>
            blade;
    };
}

　　

元件傳遞的資料無法修改,修改資料可以在建構函式中修改。

閉包應該返回一個字串。如果返回的字串與現有檢視相對應，則將呈現該檢視；否則，返回的字串將作為內聯 Blade 檢視進行計算。

插槽
通常需要透過 「插槽」 將其他內容傳遞給元件。透過回顯 $slot 變數來呈現元件插槽。為了探索這個概念，我們假設 alert 元件具有以下內容： 類似 VUE

/resources/views/components/alert.blade.php

<div class="alert alert-danger">
    {{ $slot }}
</div>

　　我們可以透過向元件中注入內容將內容傳遞到 slot ：

<x-alert>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

　　有時，元件可能需要在元件內的不同位置渲染多個不同的插槽。讓我們修改警報元件以允許注入 「標題」插槽：

<span class="alert-title">{{ $title }}</span>

<div class="alert alert-danger">
    {{ $slot }}
</div>

　　可以使用 x-slot 標記定義命名插槽的內容。任何不在顯式 x-slot 標記中的內容都將傳遞給 $slot 變數中的元件：

<x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

　　

作用域插槽
如果你使用過諸如 Vue 之類的 JavaScript 框架，那麼你可能熟悉 「作用域插槽」，它允許你從插槽中的元件訪問資料或方法。透過在元件上定義公共方法或屬性，並透過 $component 變數訪問插槽中的元件，可以在 Laravel 中實現類似的行為。在本例中，我們假設 x-alert 元件在其元件類上定義了一個公共的 formatAlert 方法：

<x-alert>
    <x-slot name="title">
        {{ $component->formatAlert('Server Error') }}
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

　　內聯元件檢視

/**
 * 獲取表示元件的檢視/內容。
 *
 * @return \Illuminate\View\View|\Closure|string
 */
public function render()
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

　　

使用元件佈局

之前我們使用模板繼承的方式進行佈局。現在我們學習了元件 接下來我們使用元件的方式的來進行佈局。

resources/views/components/layout.balde.php

<html>
    <head>
        <title>{{ $title ?? 'Todo Manager' }}</title>
          <style>
        .header{
            width: 100%;
            height: 100px;
            background-color:#f90;
        }
        .main{
            display: flex;
            width: 100%;
            min-height:500px;
        }
        .ce{
            width: 300px;
            background-color:pink;
        }
        .content{
            width: 100%;
            background-color:#cbd5e0;
        }
    </style>
    </head>

    <body>
      <header class="header"></header>
    <div class="main">
        <div class="ce">
            我是側邊欄
        </div>
        <div class="content">
                        {{ $slot }}
        </div>
    </div>
    </body>
</html>

　　

應用佈局元件

一旦定義了 layout 元件，我們就可以建立一個使用該元件的 Blade 檢視。在本例中，我們將定義一個顯示任務列表的簡單檢視：
resources/views/user.blade.php

<x-layout>
       <div>
                <h1>我是個人中心</h1>
        </div>
</x-layout>

　　請記住，注入到元件中的內容將提供給 layout 元件中的預設 $slot 變數。正如你可能已經注意到的，如果提供了 $title 插槽，那麼我們的 layout 也會尊從該插槽；否則，將顯示預設的標題。我們可以使用 x-slot 插入標題

<x-layout>
    <x-slot name="title">
        Custom Title
    </x-slot>

    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

　　轉載於：https://blog.csdn.net/qvtcxxjs/article/details/123299785

相關文章