Laravel 中创建可复用滑块组件的两种方法

本文介绍了在 Laravel 项目中创建可复用滑块组件的两种实用方法：使用 Blade include 和使用 View Composers。通过这两种方法，开发者可以避免代码重复，提高代码的可维护性和可读性，并更有效地管理视图逻辑。文章详细阐述了每种方法的实现步骤，并提供了示例代码，帮助开发者快速上手。

创建可复用滑块组件

在 Laravel 项目中，经常会遇到需要在多个页面中使用相同或相似的滑块组件的情况。为了避免代码重复，提高可维护性，我们可以将滑块组件封装成可复用的模块。本文将介绍两种实现方法：Blade include 和 View Composers。

方法一：使用 Blade include

Blade include 是 Laravel 提供的简单而强大的视图包含机制。我们可以将滑块组件的代码抽取到一个单独的 Blade 模板文件中，然后在需要使用该组件的页面中使用 @include 指令引入。

1. 创建滑块组件 Blade 模板文件：

   在 resources/views 目录下创建一个名为 slider.blade.php 的文件，并将滑块组件的 HTML 代码放入其中。

   
       
   
           
   
               
   What value our Clients set upon our Partnership
   
               
   
                   
   
                       @@##@@
                   
                   
   
                   
   
                       @@##@@
                   
               
           
   
           
   
               
   
                   
   
                       @foreach($testimonials as $testimonial)
                           
   
   
                               
   
                               
   
   
                               
   {{ $testimonial->short_description }}
   
                               
   
                                   
   
                                       @@##@@person_image }}" alt="{{ $testimonial->image_alt }}" title="{{ $testimonial->image_title }}">
                                   
                                   
   {{ $testimonial->person_name }}
                                   
   {{ $testimonial->person_position }} - {{ $testimonial->person_location }}
                               
                           
                       @endforeach
   
                   
               
           
       
   

   注意: 为了提高组件的通用性，可以考虑将变量名设置为更通用的名称。

2. 在需要使用滑块组件的页面中使用 @include 指令：

   在需要显示滑块的 Blade 模板文件中，使用 @include 指令引入 slider.blade.php，并传递所需的数据。

   @include('slider', [
       'testimonials'=>[
           (object) [
               'bg_image'=>'image1.jpg',
               'short_description'=>'test1',
               'person_image'=>'test.jpg',
               'image_alt'=>'test',
               'image_title'=>'test',
               'person_name'=>'Name',
               'person_position'=>'Test',
               'person_location'=>'test'
           ],
           (object) [
               'bg_image'=>'image2.jpg',
               'short_description'=>'test2',
               'person_image'=>'test.jpg',
               'image_alt'=>'test',
               'image_title'=>'test',
               'person_name'=>'Name',
               'person_position'=>'Test',
               'person_location'=>'test'
           ]
       ]
   ])

   这种方法的缺点是需要在每个使用滑块组件的页面中手动映射数据，如果映射逻辑比较复杂，会导致视图代码变得臃肿。

方法二：使用 View Composers

View Composers 是一种将数据绑定到视图的更高级的方法。它可以将数据准备逻辑从控制器转移到专门的类中，使控制器更加简洁，视图更加清晰。

1. 创建 View Composer 类：

   在 app/Http/ViewComposers 目录下创建一个 View Composer 类，例如 MyViewComposer.php。

   with('slider', view('slider', [
               'testimonials'=>[
                   (object) [
                       'bg_image'=>'image.jpg',
                       'short_description'=>'test',
                       'person_image'=>'test.jpg',
                       'image_alt'=>'test',
                       'image_title'=>'test',
                       'person_name'=>'Name',
                       'person_position'=>'Test',
                       'person_location'=>'test'
                   ],
                   (object) [
                       'bg_image'=>'image.jpg',
                       'short_description'=>'test',
                       'person_image'=>'test.jpg',
                       'image_alt'=>'test',
                       'image_title'=>'test',
                       'person_name'=>'Name',
                       'person_position'=>'Test',
                       'person_location'=>'test'
                   ]
               ]
   
           ]));
       }
   }

   这个类负责准备滑块组件所需的数据，并将其绑定到视图中。

   

   Removal.AI

   AI移出图片背景工具

   下载

2. 在视图中使用滑块组件：

   在需要显示滑块的 Blade 模板文件中，添加以下代码：

   {!! $slider ?? '' !!}

   这会输出由 View Composer 生成的滑块组件的 HTML 代码。

3. 注册 View Composer：

   创建一个 Service Provider，例如 ViewComposerServiceProvider.php，并将其放置在 app/Providers 目录下。

   这个 Service Provider 负责注册 View Composer，将其绑定到特定的视图。
   

4. 将 Service Provider 添加到 config/app.php：

   在 config/app.php 文件的 providers 数组中添加 App\Providers\ViewComposerServiceProvider::class。

   return [
       'providers'=>[
           //..
           \App\Providers\ViewComposerServiceProvider::class
       ]
   ];

   完成以上步骤后，滑块组件将自动加载到 welcome.blade.php 视图中。

总结

本文介绍了两种在 Laravel 项目中创建可复用滑块组件的方法：Blade include 和 View Composers。Blade include 简单易用，但需要在每个使用滑块组件的页面中手动映射数据。View Composers 可以将数据准备逻辑从控制器转移到专门的类中，使控制器更加简洁，视图更加清晰，但配置相对复杂。开发者可以根据实际情况选择合适的方法。

注意事项:

• 可以创建多个 View Composers，并将它们绑定到不同的视图，从而实现更灵活的组件复用。
• 可以使用模板方法或基类来减少 View Composers 中的重复代码。
• 建议将视图逻辑尽量保持简单，复杂的逻辑应该放在控制器或 View Composers 中处理。