Laravel 组件（Component）使用的一点心得

在项目开发中，多数时间可能很难会想到使用Component。

通过阅读Laravel文档，我们能够发现组件能够完成的效果主要是两方面

• 引入大段的HTML代码
• 向引入的HTML代码中传递PHP变量或表达式。

但是单纯的引入HTML，模板继承可以做到，include也可以做到。

引入+传递变量，include也可以做到，甚至进行简单的处理也是可以的。

那么组件的相比于include，更适合的应用场景是什么呢？

在编写权限列表页的时候，因为需要用到多级分类表格，尝试使用了组件
下图是多级分类未展开时的表格

下图是多级分类展开时的表格

这里多级分类的表设计采用了邻接表策略

考虑到在多级分类中，如果表中有节点深度字段，会在调整节点时造成大量的计算，所以没有添加此字段。

因此，在给表格渲染数据时必须要将list转化为tree。

此就会返现，单纯的用foreach循环是无法实现的，必须要用到递归

include就无能为力了，但是组件却可以很好的完成

在组件中再次使用组件标签，就很容易实现了。

@foreach($permissions as $key => $permission)
    <tr cate-id='{{$permission['id']}}' fid='{{$permission['pid']}}'>
        <td>
            <input type="checkbox" name="" lay-skin="primary">
        </td>
        <td>{{$permission['id']}}</td>
        <td>
            @for($i=0;$i<$permission['level'];$i++)
                &nbsp;&nbsp;
            @endfor
            @empty($permission['children'])
                ├
            @else
                <i class="layui-icon x-show" status='true'>&#xe623;</i>
            @endempty
            {{$permission['title']}}
        </td>
        <td><input type="text" class="layui-input x-sort" name="order" value="1"></td>
        <td>
            <input type="checkbox" name="switch" lay-text="开启|停用" {{$permission['status']==1?'checked':''}} lay-skin="switch">
        </td>
        <td class="td-manage">
            <button class="layui-btn layui-btn layui-btn-xs" onclick="xadmin.open('编辑','admin-edit.html')"><i class="layui-icon">&#xe642;</i>编辑</button>
            <button class="layui-btn layui-btn-warm layui-btn-xs" onclick="xadmin.open('编辑','admin-edit.html')"><i class="layui-icon">&#xe642;</i>添加子栏目</button>
            <button class="layui-btn-danger layui-btn layui-btn-xs" onclick="member_del(this,'要删除的id')" href="javascript:;"><i class="layui-icon">&#xe640;</i>删除</button>
        </td>
    </tr>
    @if(!empty($permission['children']))
    	// 这里再次调用permission-tree-table这个组件
        <x-permission-tree-table :permissions="$permission['children']"></x-permission-tree-table>
        // 另一种等效写法
       	@component('components.permission-tree-table',['permissions'=>$permissions])@endcomponent
    @endif
@endforeach

总结

组件可以认为是比include更高级一些的模板引入，允许在blade完成更加复杂的逻辑处理后，再输出HTML。平时我们渲染表格、菜单之类时使用循环、条件语句，都可以封装成一个个组件。只不过封装成组件比在页面中直接使用，反而会浪费更多的时间，得不偿失。因此组件的使用频率就不是很高了。