laravel blade模板引擎组件使用

laravel blade模板引擎组件使用

如上图所示，表格搜索查询时，当有多个筛选框时觉得写太多 <input /> 有点麻烦，于是看看可不可以使用 vue 组件，搜索一番发现文档中有关于 blade 中使用组件，如下：

• 命令框输入以下代码，会在 resources/views 下生成 components文件夹，以及在 app/View/下生成 Components 文件夹

      php artisan make:component searchInputNumber
  

• 打开 app/View/Components/searchInputNumber.php文件，写入以下代码

  	<?php
  		namespace App\View\Components;
  		use Illuminate\View\Component;
  		
  		class searchInputNumber extends Component
  		{
  		    public $title;
  		
  		    public $attr;
  		
  		    /**
  		     * Create a new component instance.
  		     *
  		     * @return void
  		     */
  		    public function __construct($title,$attr)
  		    {
  		        $this->title = $title;
  		        $this->attr = $attr;
  		    }
  		
  		    /**
  		     * Get the view / contents that represent the component.
  		     *
  		     * @return \Illuminate\View\View|string
  		     */
  		    public function render()
  		    {
  		        return view('components.search-input-number');
  		    }
  		}
  
  

• 新建 search_input_number.blade.php 文件（命名表示这是一个input 类型为 number的输入框），组件代码如下所示：

  	<div class="layui-inline">
  		<label class="layui-form-label">{{ $title }}</label>
  		<div class="layui-input-inline">
      		<input type="number" id="search_user_name" name="{{ $attr }}"  placeholder="请输入{{ $title }}"  class="layui-input">
  		</div>
  	</div>
  

  ps： {{ $title }} 、 {{ $attr }} 表示动态变量，可以根据需要添加多个

  在其他模板调用组件代码如下：

  	<x-search_between_number title="收入金额" attr="earnings_num"></x-search_between_number>