Components，组件。组件是一种独立的可以定制的能重复使用的视图 .. 你可以把一些常用的界面定义成组件，使用它的时候可以通过给组件传递值的方式，或者通过 slot 去定制组件的显示 ..

在这个视图里面，这块内容显示的是一个内容列表 .. 我们可以把它定义成一个组件 .. 剪切一下这块代码 .. 再去创建一个文件 .. 放在 resources .. components 的下面，名字可以是 list.edge ..

在这个组件里面，需要用到 entities 这个数据 .. 在使用这个组件的时候，我们可以给组件传递这个数据的值 .. 回到 index 这个视图 ..

这里可以使用一下刚才定义的组件 .. 用的是 @component .. 如果不使用 endcomponent ，可以在 tag 名字的前面加上一个 ! 号，表示这是一个自关闭的 tag ..

因为暂时没有东西要放在 component 跟 endcomponent 之间，所以这里可以使用一个自关闭的 component ..

设置一下要使用的组件的名字 .. 这里就是 components 目录下面的 list 这个组件 ..

回到浏览器 .. 刷新 ..

页面上没有显示内容列表 .. 因为组件里需要用的 entities 数据还没有值 .. 这里给这个组件传递一些数据 .. 一个对象 .. 组件里面需要一个 entities .. 对应的值就是 entities .. 后面这个 entities 是从控制器那里传递给当前使用的这个视图的一个数据的名字 ..

属性的名字还有表示它的值的名字一样 .. 所以可以简单写成一个 entities ..

再到浏览器上试一下 .. 这次页面上就会显示一个内容列表了 .. 这个列表的显示现在是用一个组件控制的 ..

再打开 PostController .. 在传递给视图的数据这里，再添加一个项目 .. 修改一下它的 id .. title 是 Carrot .. 再修改一下 content 属性的值，是一个胡萝卜 ..

这样 posts 这个页面上显示的列表里面就又多了一个项目 ..

然后再回到 list 这个组件 .. 在这个 div 元素上可以添加一个 style 属性，去设置一下它的样式 .. 用一个 padding 设置一下内边距，大小是 4px ..

再用一个 if 判断一下 .. 如果 !$loop.last .. 意思就是，如果当前循环的项目不是最后一个 .. 并且 .. border 的值是 true .. 我们可以再添加一条样式 .. border-bottom: 1px solid .. 一个像素的底边框 .. 边框的颜色可以绑定一个值 .. 名字是 borderColor .. 再给它一个默认的值 .. #eee

找到使用这个组件的视图 .. 使用这个组件的时候，再给它一个 border .. 把它的值设置成 true .. 这样列表项目的下面就会显示一条边框 ..

再添加一个 borderColor .. 它可以设置边框的颜色 .. #ddeaf2 ..

现在，列表项目的下面的边框的颜色会有变化 ..