Vue学习杂记（三）——v-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。