Vue 之 slot(插槽）

前言：

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

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

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

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

 

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来呈现。

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

做者：Leaf_hyc 连接：https://juejin.im/post/5c83aa1b5188257ddb6af526 来源：掘金 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。