vue组件之插槽（slot）的使用

前面几篇文章中我们写了个图书列表的组件
然后在booklist_component.html文件中引用了图书列表组件
是通过httpVueLoader这个插件来完成在非webpack环境下加载组件
其中组件是通过 <booklist/>这种形式引用的 其中 />表示封口
那么我们可不可以在组件内部写入一些标记呢（代码呢）
就像普通的html元素一样
<div>这是图书列表页</div> 组件内部可不可以写入些内容呢？
接下来我们试下
首先我们在booklist_component.html里面引用组件处的组件内部写入一些内容

image.png

然后在booklist.vue文件中 加入<slot></slot>插槽

image.png
运行代码
显示如下
image.png
可以发现只要在引用组件的肚子内（内部）写入一些元素 然后在组件具体实现里写入slot标记 就可以把内容显示出来
并且插槽可以写多个
image.png
这种页面将会显示如下
image.png
插槽还可以有名字属性 可以按照名字 进行匹配
比如下面
image.png

在booklist组件内部写入了三个插槽 两个带有名字的 一个表示显示标题 一个表示显示广告位 一个没有名字的（默认插槽）
由于我们引用组件的文件内 没有跟插槽进行匹配 所以显示默认插槽
运行结果

image.png
可以发现显示了是不带名字的那个插槽内容
那么如果想要跟插槽匹配 需要怎么办呢
那么需要在引用组件的文件内部 写入如下
image.png
这样写入 会按照插槽名字 进行匹配显示内容
显示如下
image.png
并且组件内部写入的元素也可以是组件
如下
image.png
ad.vue内容如下
image.png
运行结果
image.png
以上就是插槽的初步使用 总结一下就是模板里面引用组件时可以像写普通html元素一样 在标签内部写入一些文字标签等 然后在组件本身的文件内（.vue文件里）需要的地方用slot插槽将组件肚子里面写入的内容给显示出来 插槽可以带有名字 可以按照名字匹配显示哪个