laravel view components

該套餐已被放棄

Laravel 中連接資料和視圖渲染的更好方法

視圖元件是一種幫助組織與視圖相關的邏輯的方法，類似於視圖編輯器。

 namespace App  Http  ViewComponents ;

use Illuminate  Http  Request ;
use Illuminate  Contracts  Support  Htmlable ;

class NavigationComponent implements Htmlable
{
    /** IlluminateHttpRequest */
    private $ request ;

    /** @var string */
    private $ backgroundColor ;

    public function __construct ( Request $ request , string $ backgroundColor )
    {
        $ this -> request = $ request ;
        $ this -> backgroundColor = $ backgroundColor ;
    }

    public function toHtml (): string
    {
        return view ( ' components.navigation ' , [
            ' activeUrl ' => $ this -> request -> url (),
            ' backgroundColor ' => $ this -> backgroundColor ,
        ]);
    }
}

 @render ( ' navigationComponent ' , [ ' backgroundColor ' => ' black ' ] )

視圖元件可以是任何實作 Laravel 的Htmlable契約的元件，因此您不一定需要使用 Blade 視圖來渲染元件。這對於包裝第三方 HTML 套件非常有用，例如 spatie/laravel-menu。

 namespace App  Http  ViewComponents ;

use Illuminate  Contracts  Support  Htmlable ;
use Illuminate  Contracts  Auth  Guard ;
use Spatie  Menu  Laravel  Menu ;

class MainMenuComponent implements Htmlable
{
    /** @var IlluminateContractsAuthGuard */
    private $ guard ;

    /** @var string */
    private $ class ;

    public function __construct ( Guard $ guard , string $ class = null )
    {
        $ this -> guard = $ guard ;
        $ this -> class = $ class ;
    }

    public function toHtml (): string
    {
        $ menu = Menu:: new ()
            -> addClass ( $ this -> class )
            -> url ( ' / ' , ' Home ' )
            -> url ( ' /projects ' , ' Projects ' );

        if ( $ this -> guard -> check ()) {
            $ menu -> url ( ' /admin ' , ' Adminland ' );
        }

        return $ menu ;
    }
}

 @render ( ' mainMenuComponent ' , [ ' class ' => ' background-green ' ] )

相對於視圖編輯器的好處是資料和渲染邏輯在元件中明確地綁定在一起，而不是事後連接。它們還允許您無縫組合屬性和依賴項注入。

該包基於 Jeff Ochoa 的Introducing View Components in Laravel，它是 View Composers 的替代品。

支持我們

我們投入了大量資源來創建一流的開源套件。您可以透過購買我們的一款付費產品來支持我們。

我們非常感謝您從家鄉寄給我們一張明信片，並註明您正在使用我們的哪種套餐。您可以在我們的聯絡頁面上找到我們的地址。我們在虛擬明信片牆上發布所有收到的明信片。

安裝

您可以透過 Composer 安裝該軟體包：

composer require spatie/laravel-view-components

無需額外設定。 Laravel 會自動發現並註冊服務提供者。

您可以選擇使用以下方式發佈設定檔：

php artisan vendor:publish --provider= " SpatieViewComponentsViewComponentsServiceProvider " --tag= " config "

這是將在config/view-components發布的文件的預設內容：

 return [
    /*
     * The root namespace where components reside. Components can be referenced
     * with camelCase & dot notation.
     *
     * Example: 'root_namespace' => AppHttpViewComponents::class
     *
     * `@render('myComponent')
     *     => `AppHttpViewComponentsMyComponent`
     */
    ' root_namespace ' => ' AppHttpViewComponents ' ,

    /*
     * Register alternative namespaces here, similar to custom view paths.
     *
     * Example: 'navigation' => AppServicesNavigation::class,
     *
     * `@render('navigation::mainMenu')`
     *     => `AppServicesNavigationMainMenu`
     */
    ' namespaces ' => [
        // 'navigation' => AppServicesNavigation::class,
    ],
];

用法

@render指令

@render Blade 指令接受兩個參數：第一個是視圖元件的路徑或類別名，第二個是一組額外的屬性（可選）。

您可以選擇透過路徑或類別名稱引用元件。

 @render ( ' myComponent ' )
@render ( App  Http  ViewComponents MyComponent :: class )

參數將會被注入到視圖組件的__construct方法中。該元件是使用 Laravel 的容器實例化的，因此 render 未提供的參數將自動注入。

 use Illuminate  Http  Request ;

class MyComponent implements Htmlable
{
    public function __construct ( Request $ request , string $ color )
    {
        $ this -> request = $ request ;
        $ this -> color = $ color ;
    }

    // ...
}

 @render ( ' myComponent ' , [ ' color ' => ' red ' ] )

在上面的範例中，明確設定了$color ，並且 Laravel 將注入$request物件。

配置

根命名空間

透過設定root_namespace ，您可以定義大部分視圖元件的位置。預設情況下，它位於AppHttpViewComponents中。

 app/
  Http/
    ViewComponents/
      MyComponent.php
      Nested/
        NestedComponent.php

上述元件可以使用@render('myComponent')和@render('nested.nestedComponent')來渲染。

附加命名空間

您可以在namespaces配置中註冊其他命名空間，類似於視圖路徑。

 return [
    ' namespaces ' => [
        ' navigation ' => App  Services Navigation::class,
    ],
];

 app/
  Services/
    Navigation/
      Menu.php

現在可以使用@render('navigation::menu')渲染上面的Menu元件。

測試

composer test

變更日誌

請參閱變更日誌以了解有關最近更改內容的更多資訊。

貢獻

詳細資訊請參閱貢獻。

安全

如果您發現任何與安全相關的問題，請發送電子郵件至 [email protected]，而不是使用問題追蹤器。

製作人員

• 塞巴斯蒂安·德·戴因
• 所有貢獻者

執照

麻省理工學院許可證 (MIT)。請參閱許可證文件以獲取更多資訊。