对Vue插槽slot的理解

By Leaf

---

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

1、理解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{
    width: 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{
    width: 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{
    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种方式显示数据的最终呈现效果分别以下： 一、flex显示

二、列表显示

三、直接显示

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

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