v-slot插槽,vue slot插槽类型
Slot是Vue提出的一个概念。就像它的名字一样，slot是用来决定将承载的内容插入到指定的位置，这样模板就可以分块，具有模块化、可重用性更大的特点。下面这篇文章主要介绍了vue2中slot基本使用规范的相关信息，有需要的可以参考一下。
目录
基本插槽组件(匿名插槽)命名插槽范围插槽解构插槽摘要
前言
在vue的开发过程中，我们会经常用到vue的slot组件，在vue的官方文档中有描述：
Vue实现了一套内容分发的API，其灵感来源于Web组件的规范草案，使用元素作为出口来承载分发的内容。
插槽大致分为以下几类：
基础slot组件(匿名插槽)
匿名槽的主要使用场景并不涉及特别复杂的业务，更像是纯粹展示组件内容。
！-子组件-
模板
跨度
我是基本槽的子组件，父组件传递的值：
span style= color:red slot/slot/span
/span
/模板
！-父组件-
里
基本插槽组件(匿名插槽):Base这是来自父组件的一段文本/Base。
/李
从导入基础。/base . vue ；
具名插槽
命名插槽，插槽名称需要在父组件和子组件之间达成一致。
！-子组件-
模板
跨度
span style=color: red
插槽名称=名称1 /插槽
插槽名称=名称2 /插槽
/span
/span
/模板
！-父组件-
里
p命名的插槽：/p
特殊的
模板v型槽：名称1
pname1 /p发送的内容
/模板
模板v型槽：名称2
pname发送的内容2 /p
/模板
/具体
/李
从导入特定内容。/specific . vue ；
作用域插槽
Scope slot，子组件提供数据，父组件接收子组件的值并显示和处理逻辑。
！-子组件-
模板
跨度
跨度
slot name= scopeName v-bind:scope data= age /slot
/span
/span
/模板
脚本语言
从“vue-property-decorator”导入{ Component，Vue，Prop }；
@组件
导出默认类范围扩展Vue {
私龄：数=23；
}
/脚本
！-父组件-
里
p范围插槽/p
范围
模板v-slot:scopeName=childData
由作用域子组件插槽返回的数据：
span style=color: red
{{ childData.scopeData }}
/span
/模板
/范围
/李
从导入特定内容。/specific . vue ；
解构插槽
解构槽，类似于js写作过程中的对象解构。
{数据：{用户名：1 } }
！-子组件-
模板
跨度
p
slot v-bind:user=user/slot
/p
/span
/模板
脚本语言
从“vue-property-decorator”导入{ Component，Vue，Prop }；
@组件
导出默认类Deconstru扩展Vue {
私人用户：对象={
姓名：张三，
年龄：23，
};
}
/脚本
！-父组件-
里
p构造插槽/p
拆除结构
模板v-slot={ user: person }
父组件模板：{{ person.name }}，{{ person.age }}
/模板
/Deconstru
/李
从导入特定内容。/de constru . vue ；
以上例子已经全部上传到开源仓库，后续关于vue的学习笔记会更多关于这个项目。欢迎明星！
马https://gitee.com/lewyon/vue-note
吉苏普https://github.com/akari16/vue-note
总结
关于vue2中slot的基本使用规范的这篇文章到此为止。有关vue2中slot的使用规范的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。