Vue 之 slot(插槽）

前言：

vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项在使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了vue的说明文档。

实际上，插槽的概念很简单，下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。

进入这三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。

由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制；插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

 

一、理解vue中的slot

官网上对slot的理解是：

“Vue实现了一套内容分发的API，这套API基于当前的Web Components规范草案，将slot元素作为承载分发内容的接口”。

  在参考了很多资料之后，以下总结一下我对slot的理解:   slot的意思是插槽，Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。   在我们的电脑主板上也有各种各样的插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的。我们可以理解slot为要占出当前的位置，方便我们插入内容。或者可以这样理解：要去吃饭了，儿子先去占座，然后等他爸爸来了再一起吃。   Vue的插槽分为匿名插槽（单个插槽/默认插槽）、具名插槽、作用域插槽（带数据的插槽）。 ####匿名插槽（单个插槽/默认插槽）

• 无name属性
• 在组件中只可以使用一次
• 父组件提供样式和内容

  <!-- 父组件-->
<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <chlid>
        <div class="tmp1">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    </child>
    </div>
</template>
<script>
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
     50px;
    height: 50px;
    border:  1px solid black;
}
</style>
复制代码

<!--子组件-->
<template>
    <div>
        <slot></slot>
        <h2>child子组件部分</h2>
    </div>
</template>
复制代码

最终呈现效果：

如果改变子组件中的位置：

<template>
    <div>
        <h2>child子组件部分</h2>
      <slot></slot>
    </div>
</template>
复制代码

改变slot位置后的最终呈现效果如下：

只有在父组件的child下写了html模板，才能在子组件指定的位置放父组件的内容。插槽最后显示不显示是看父组件有没有在child下写模板，像下面一样：

<child>
    html模板
</child>
复制代码

####具名插槽

• 有name属性
• 在组件中可以使用N次
• 父组件通过html模板上的slot属性关联具名插槽
• 没有slot属性的html模板默认关联匿名模板
• 父组件提供样式和内容

<!--父组件-->
<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <chlid>
        <div class="tmp1" slot="up">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    <div class="tmp1" slot="down">
            <span>Leaf 6</span>
            <span>Leaf 7</span>
            <span>Leaf 8</span>
            <span>Leaf 9</span>
            <span>Leaf 10</span>
        </div>
    </child>
    </div>
</template>
<script>
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
     50px;
    height: 50px;
    border:  1px solid black;
}
</style>
复制代码

<!--子组件-->
<template>
    <div>
        <slot name="up"></slot>
        <h2>chlid子组件部分</h2>
        <slot name="down"></slot>
    </div>
</template>
复制代码

最终呈现效果：

####作用域插槽（带数据的插槽）

• 父组件只提供样式，子组件提供内容
• 在slot上面绑定数据
• 子组件的值可以传给父组件使用
• 父组件展示子组件数据有3种方式：flex显示、列表显示、直接显示
• 使用slot-scope必须使用template
• scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来
• slot有两个属性，一个row,另一个是index

<!--父组件-->
<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <chlid>
      <!-- 第一次使用：用flex展示数据 -->
        <template slot-scope="user">
            <div class="tmp1">
                <span v-for="(item,index) in user.data" :key="index">{{item}}</span>
            </div>
        </template>
        <!-- 第二次使用：用列表展示数据 -->
        <template slot-scope="user">
            <ul>
                <li v-for="(item,index) in user.data" :key="index">{{item}}</li>
            </ul>
        </template>
        <!-- 第三次使用：直接显示 -->
        <template slot-scope="user">
          {{user.data}}
        </template>
    </child>
    </div>
</template>
<script>
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
     50px;
    height: 50px;
    border:  1px solid black;
}
</style>
复制代码

<!--子组件-->
<template>
    <div>
        <h2>chlid子组件部分</h2>
        <slot :data="data"></slot>
    </div>
</template>
<script>
export default {
  props: ["message"],
  data () {
      return {
          data: [''小庄','CC','小张','小林','Leaf','Bob']
      }
  }
}
</script>
复制代码

通过3种方式显示数据的最终呈现效果分别如下： 1、flex显示

2、列表显示 3、直接显示

这里我们所看到的数据“'小庄','CC','小张','小林','Leaf','Bob'”都是子组件data提供的数据,父组件如果要使用这些数据必须要通过template模板结合slot-scope来呈现。

这里只是将自己学到的知识做一个总结，方便自己记忆和查阅，可能会有错，望大神指点！

作者：Leaf_hyc
链接：https://juejin.im/post/5c83aa1b5188257ddb6af526
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。