Vue学习杂记(三)——v-slot总结

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。

上一篇:vue 里面的slot属性


下一篇:架构师成长记_第六周_17_redis slot槽节点的介绍及查看集群信息