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)。请参阅许可证文件以获取更多信息。