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

淡淡的烟草味﹌ 2022-12-07 15:20 186阅读 0赞

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

# 概述 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

# 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>

最终练习效果：：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

balabalabalabalabal

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

### 完成代码地址 ###

[https://gitee.com/xiaozhidayu/vue-study-component][https_gitee.com_xiaozhidayu_vue-study-component]

[https://gitee.com/xiaozhidayu/vue-study-component.git][https_gitee.com_xiaozhidayu_vue-study-component.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221123/ee3e71a013cc4a1fa9234b68b04f7883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/a35bb74357c44e8a90a9d0c951ad4039.png
[https_gitee.com_xiaozhidayu_vue-study-component]: https://gitee.com/xiaozhidayu/vue-study-component
[https_gitee.com_xiaozhidayu_vue-study-component.git]: https://gitee.com/xiaozhidayu/vue-study-component.git