Vue学习杂记（三）——slot总结
引言：其实老早就想写这篇了，因为我也觉得这种插槽设计挺好的。但是由于…今天开始写（懂得都懂，打鱼去了），由于最近了解了eslint代码风格，想着多使用使用，熟悉熟悉eslint这种代码风格为将来就业做点准备。讲道理，这个是真的狗，本来代码没啥问题，动不动就不给你跑，只能多积累，多鞭尸尝试总结问题。
一、v-slot的用途
如果之前使用过canvas就会记起来一点，像如下代码：
<canvas>你的浏览器不支持canvas</canvas>
<dynamic-list>
<p>你猜猜我会不会显示</p>
</dynamic-list>
结果是否定的，这样的写法之下dynamic-list组件中的内容将不会被解析，而是被dynamic-list组件里面的template内容代替。于是，为了更好的提高页面UI的重用率，slot插件就出现了，主要用于UI组件中部分UI有偏差的地方。
二、v-slot的使用方法
首先，给出solt的使用实例（构建一个article的组件）：
给出article.list组件代码，主要是分头部、内容和尾部三个部分来构建：
<template>
<div class="article-container">
<div class="header">
<div>文章标题：</div>
<slot name="header"></slot>
</div>
<div class="contents">
<div>文章内容：</div>
<slot name="contents"></slot>
</div>
<div class="footer">
<div>文章结尾：</div>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.article-container {
color: #fff;
}
.header {
text-align: center;
background-color: blueviolet;
}
.contents {
text-align: center;
color: #24d130;
background-color: powderblue;
}
.footer {
text-align: center;
background-color: royalblue;
color: red;
}
</style>
app.vue文件中使用该组件：
<template>
<div>
<article-list>
<template #header>
title
</template>
<template #contents>
contents
</template>
<template #footer>
footer
</template>
</article-list>
</div>
</template>
<script>
import articleList from './components/article-list'
export default {
components: {
articleList
}
}
</script>
<style lang="less">
</style>
说明：组件插槽v-slot可以使用类似于@、:等语法糖符号#代替。
2.2 不具名插槽
在组件中如果没有写名字的slot，系统会分配一个默认的default作为该slot的名字，如果需要在使用该组件时插入内容，可以使用如下代码插入：
<template v-slot:default>
<div class="noname-slot">不具名插槽</div>
</template>
2.3 slot的匹配数量关系
多对多匹配，可以出现多个slot的名字，同样名字的slot里面支持出现多个相同的name，在使用组件插入内容之后，对应slot的内容也会出现在多处。
2.4 利用slot传值
slot插槽可以用来传值（主体是通过对象来传值），其传值方式如下，这里组件传值又称为作用域。
子组件slot中的内容：
<slot name="contents"
msg="子组件像父组件传递的message"
:res=testData></slot>
父组件中获取子组件中传递的数据：
<template #contents="obj">
{{obj}}
</template>
传值数据支持使用解构语法，如上面代码可以改写成如下形式：
<template #contents="{ msg , testData }">
{{msg}}{{testData}}
</template>
三、总结代码中关于eslint风格错误以及规范推荐
（1）eslint中对于组件的命名要求不能使用前端已经存在的语义化标签，需要注意的是，有些前端语义标签比较生僻，像article等标签，如果名字出现在组件中会报错；
（2）eslint报错提示信息明对应性不强，如果出现了错误可以看一下上文，看看是不是由于其他代码不规范导致的错误。
推荐：
（1）构建组件时，需要使用到唯一根节点，这个为一根节点class名称推荐使用*-container；
（2）通过slot由子组件向父组件传值推荐使用scope，这里值得其实就是所谓的作用域，也就是父组件里面用来传输数据的obj。