对Vue插槽slot的理解

By Leaf

---

在学习的过程中遇到了Vue的slot元素，开始不知道也不了解它的用途、用法，即然遇到了不懂的知识点我就学习一下。

一、理解vue中的slot

官网上对slot的理解是：

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

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

匿名插槽（单个插槽/默认插槽）

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

  <!-- 父组件-->
<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{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>

<!--子组件-->
<template>
    <div>
        <slot></slot>
        <h2>child子组件部分</h2>
    </div>
</template>

最终呈现效果：

image.png

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

<template>
    <div>
        <h2>child子组件部分</h2>
      <slot></slot>
    </div>
</template>

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

image.png

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

<child>
    html模板
</child>

具名插槽

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

<!--父组件-->
<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{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>

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

最终呈现效果：

image.png

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

• 父组件只提供样式，子组件提供内容
• 在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{
    width: 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显示

image.png

2、列表显示

image.png
3、直接显示
image.png

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

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