vue2版本中slot的基本使用详解

生也有涯，知也无涯。这篇文章主要讲述vue2版本中slot的基本使用详解相关的知识，希望能为你提供帮助。
前言
在vue的开发过程中，我们会经常使用到vue的slot插槽组件，vue官方文档的描述：
slot大概分为以下几种：
基础slot组件(匿名插槽)
匿名插槽主要使用场景并不涉及特别复杂的业务，更像是纯展示组件内容

< !--子组件--> < template> < span> 我是基础slot子组件, 父组件传过来的值: < span style="color: red"> < slot> < /slot> < /span> < /span> < /template>

< !--父组件--> < li> 基础slot组件(匿名插槽)：< Base> 这是一段父组件传过来的文字< /Base> < /li> import Base from "./Base.vue";

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

< !--子组件--> < template> < span> < span style="color: red"> < slot name="name1"> < /slot> < slot name="name2"> < /slot> < /span> < /span> < /template>

< !--父组件--> < li> < p> 具名插槽：< /p> < Specific> < template v-slot:name1> < p> name1传过来的内容< /p> < /template> < template v-slot:name2> < p> name2传过来的内容< /p> < /template> < /Specific> < /li> import Specific from "./Specific.vue";

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

< !--子组件--> < template> < span> < span> < slot name="scopeName" v-bind:scopeData="https://www.songbingjia.com/android/age"> < /slot> < /span> < /span> < /template> < script lang="ts"> importComponent, Vue, Propfrom "vue-property-decorator"; @Component export default class Scope extends Vue private age: Number = 23; < /script>

< !--父组件--> < li> < p> 作用域插槽< /p> < Scope> < template v-slot:scopeName="childData"> 作用域子组件slot返回的数据： < span style="color: red"> childData.scopeData < /span> < /template> < /Scope> < /li> import Specific from "./Specific.vue";

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

data: username:1

< !--子组件--> < template> < span> < p> < slot v-bind:user="user"> < /slot> < /p> < /span> < /template> < script lang="ts"> importComponent, Vue, Propfrom "vue-property-decorator"; @Component export default class Deconstru extends Vue private user: Object = name: "zhangsan", age: 23, ; < /script>

< !--父组件--> < li> < p> 解构插槽< /p> < Deconstru> < template v-slot=" user: person "> 父组件模板： person.name , person.age < /template> < /Deconstru> < /li> import Specific from "./Deconstru.vue";

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