萌新laravel踩坑记二：Blade 组件
26 / 5 / 创建于 1年前 /
zanetti 的个人博客
大家好，萌新又来踩坑了，这次踩的是 Blade 组件
其实 Blade的语法跟之前用过的ThinkPHP，Smarty之类的挺像的，看看基本上就能上手了，这里主要是几个点。
组件拆分
- 总所周知，切图仔把页面切好后一般就是丢一个大的
HTML页面过来，然后我们再根据页面进行拆分，一般会分为，headlayoutfootercontent这几大页面。 - 要实现如上功能，在传统的模版语言中，一般都会把这几大页面拆分成不同的模版文件，然后使用类似
include的指令引入进来，笔者一开始也以为是这样子拆分，但是在找了一圈，没发现类似include的语法，倒是发现了名为组件的拆分方式，研究了一番之后确实非常 amazing 啊。 - 首先先按照传统方式，将页面拆分成
headlayout这两个组件（笔者这边的页面较为简单，所以不需要单独拆分footer）
创建组件
- 使用
php artisan make:component head来创建head组件，layout组件同理 - 创建完成之后，会在
app/View/Components下看到Head.php和Layout.php,这两个就是用来渲染组件的类，可以在这里面加一下共有的逻辑，并渲染变量信息等。同时，在resources/views/components/目录下也会发现head.blade.php和layout.blade.php这两个模版文件。
使用组件
组件创建完了，就需要引用组件进来，类似include指令一般。
- 使用
php artisan make:view index命令创建一个模板文件，你可以在resources/views目录下找到index.blade.php这个文件。 - 在
index.blade.php中加入如下代码：<x-layout> <div>hello world!</div> </x-layout>这里的
x-layout指的是，引用layout这个组件，组件在模版中一般以x-开头的形式，带上组件名，构成标签名称，标签内部的内容就指代要嵌入到组件内部的数据。
那么，组件是怎么知道要把数据放入到自己的模版中呢，答案就是 {{$slot}}这个指令，熟悉vue的同学应该很清楚，就是渲染组件默认插槽数据的意思，同理在 Blade 中也是如此。
同时，组件和组件间，也可以用 x-{组件名}的形式进行引入，例如：
<body>
<x-head />
{{$slot}}
</body>上述代码，就是在
layout.blade.php中引入head组件
那么，一个简单的切页布局就完成了，简单来说就是：
要渲染的页面
detail.blade.php-> 查找当前页面的所有组件x-layout-> 再查找组件中是否包含其他组件x-layout包含x-head-> 最终渲染出 HTML
踩坑记录（占位）
总结
组件这个坑，其实只是小踩了一下，因为目前用到的功能还是比较少的。总体来说用起来还是挺棒的，感觉像是写 vue 这类前端框架一样，一开始不是很理解，上手实际操作之后，就很快适应的，真的很赞。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：