Vue 进阶[三] vue 组件化之slot 插槽

进阶会发现越往前走，知道的越多，不知道的也越多，但是通过学习，弱化知识盲区，对自己的实际开发选择会有很大的影响，也会影响变成思维。

概述

组件系统是vue的一个重要概念，因为它是一种抽象，让我们可以使用独立可抽象的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。所谓组件化，就是把页面拆分成多个独立的组件，每个组件依赖的 css  js  模板  图片 等资源等放在一起开发和维护，所以组件化在系统内部可复用，组件之间可以嵌套。因此组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，编译多人协同开发。

slot 插槽

理解

插槽是Vue是先内容分发的API，而分发的内容将对应的放在 <slot> </slot>中，用于复合组件的开发，插槽在通用组件库的开发中有大量应用。

例如:vue中的插槽名字很形象，就像我们电脑上的插槽一样，我们的电脑留了很多的插槽孔，如USB插槽，耳机插槽，电源插槽，这些插槽就是vue中的slot，耳机插槽是命名了的只能接受耳机，而USB 则可以连接很多如U盘 电源线等。

匿名插槽

// Layout 
 <div>
   <slot></slot>
 </div>
// parent 
 <layout>
        Hello 匿名插槽
  </layout>

组件layout 中的 文本内容 'Hello 匿名插槽' 直接分发到 组件 插槽 slot 的位置 ，slot 本身没有显示意义，layout 组件类似如下，只是内容是外部传过来替换了 slot 占的位置

// Layout 
 <div>
   Hello 匿名插槽
 </div>

具名插槽

将内容分发到指定的插槽位置，因此就需要一个名字来进行标识了

  // layout组件

        <div>
            <!-- 匿名插槽 -->
            <slot></slot>
        </div>
        <div>
            <!-- 具名插槽 -->
            <slot name="content"></slot>
        </div>

  // parent 组件   
 <template v-slot:default> default 特殊的具名插槽</template>
 <template v-slot:content> Hi content 具名插槽</template>


       

其实匿名插槽也是特殊的具名插槽，默认是default ，如果设置了default 会把没有设置default 的内容覆盖掉 可以试验

作用域插槽

作用域插槽一般用在，分发的内容要用到子组件中的数据。

//layout 

<div class="footer">
    <slot name="footer" :fc="footerContent"></slot>
 </div>


// 子组件给父组件传的值 按需取奥

// parent

<!-- 作用域插槽 -->
<!-- 对象解构 -->
<template v-slot:footer="{fc}">{{fc}}</template>

最终练习效果：：

 

balabalabalabalabal

插槽的对vue组件的封装中有很大作用，但是刚开始理解的时候有点抽象，还是要多用多琢磨就能理解了。

完成代码地址

https://gitee.com/xiaozhidayu/vue-study-component

https://gitee.com/xiaozhidayu/vue-study-component.git