vue2版本slot基本使用详解

前言在vue的开发过程中，我们经常会用到vue的slot组件。vue官方文档的描述：Vue实现了一套内容分发API。这套API的设计灵感来源于WebComponents的规范草案。元素作为承载分布式内容的出口槽，大致分为以下几种：基础槽组件（匿名槽）匿名槽的主要使用场景不涉及特别复杂的业务，比较多像纯粹展示组件内容

基础槽组件（匿名槽）：这是父组件传过来的一段文字

从“./Base.vue”导入基础；Namedslot命名槽，槽名需要父组件和子组件约定

命名插槽：

name1传递的内容</p>

name2传过来的内容

importSpecificfrom"./Specific.vue";Scopeslotscopeslot，子组件提供数据，父组件接收子组件的值并显示处理逻辑

Scopeslot

scope子组件槽返回的数据：{{childData.scopeData}}

从“./Specific.vue”导入特定的；deconstructionslot解构槽，类似于js中写对象过程中的对象解构{data:{username:1}}}}}!--Subcomponents-->

解构槽

父组件模板：{{person.name}},{{person.age}}

importSpecificfrom"./解构.vue";以上例子已经上传到开源仓库，后续会更新关于vue的学习笔记本项目，欢迎来到星码云https://gitee.com/lewyon/vue-notegithuphttps://github.com/akari16/vue-note总结在vue的slot文档中，还有一个缩写为exclusivedefaultslotdynamicslotnamenamedslot

这里是一些联系方式

关于槽的官方文档传送门https://cn.vuejs.org/v2/guide...转载请注明出处和作者。