vue2中插槽(slot)的基本使用规范

目录

• 前言
• 基础slot组件(匿名插槽)
• 具名插槽
• 作用域插槽
• 解构插槽
• 总结

前言

在vue的开发过程中，我们会经常使用到vue的slot插槽组件，vue官方文档的描述：

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口

slot大概分为以下几种：

基础slot组件(匿名插槽)

匿名插槽主要使用场景并不涉及特别复杂的业务，更像是纯展示组件内容

    基础slot组件(匿名插槽)：这是一段父组件传过来的文字


import Base from "./Base.vue";

具名插槽

具名插槽，需要在父组件和子组件约定插槽名称

    
具名插槽：
    
        
        
    


import Specific from "./Specific.vue";

作用域插槽

作用域插槽，子组件提供数据，父组件接收子组件的值并展示和处理逻辑

    
作用域插槽
    
        
    


import Specific from "./Specific.vue";

解构插槽

解构插槽，类似在js书写对象过程中的对象解构

{ data:{ username:1 } }

    
解构插槽
    
        
    


import Specific from "./Deconstru.vue";

以上例子均已上传至开源仓库，后续关于vue的学习笔记均会更在在该项目上，欢迎star

码云 https://gitee.com/lewyon/vue-note

githup https://github.com/akari16/vue-note

总结

到此这篇关于vue2中插槽(slot)的基本使用规范的文章就介绍到这了,更多相关vue2中slot使用规范内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！