插槽的分类
- 在Vue中，插槽的使用方式可以分为三种：匿名插槽（默认插槽）、具名插槽和作用域插槽。
匿名插槽（默认插槽）
- 匿名插槽在子组件中给定位置后，在父组件就是直接在写在子组件标签中，它会自动占用子组件给定的位置
//子组件 son.vue
<slot>
<span> (匿名插槽) 我是默认插槽，没给我传内容就会默认显示这句话 </span>
</slot>
//父组件 parent.vue
<template>
<view>
<son>
<span>匿名插槽内容</span>
</son>
</view>
</template>
<script>
import son from './components/son.vue'
</script>具名插槽
- 具名插槽允许我们在组件中定义多个插槽，并且可以根据插槽的名称来传递内容。
- 在组件的模板中使用
<slot name="slotName"></slot>定义具名插槽，然后在使用组件时，使用<template v-slot:slotName>或者<template slot="slotName">来传递内容给指定的插槽。 - 如果在使用具名插槽时没有标注
<template v-slot:slotName>或者<template slot="slotName">的插槽名将不会显示对应的插槽内容。
//子组件 son.vue
<template>
<div>
<slot name="header">
<view>可在此自定义内容</view>
</slot>
<div class="content">
<slot>
<view>可在此自定义内容</view>
</slot>
</div>
<slot name="footer">
<view>可在此自定义内容</view>
</slot>
</div>
</template>
// 父组件 parent.vue
<template>
<son>
<template slot=header>
<h2>我是头部内容!</h2>
</template>
<h2>你好，世界!</h2>
<template slot=footer>
<h2>我是底部内容!</h2>
</template>
</son>
</template>
<script>
import son from './components/son.vue'
</script>
作用域插槽
-
作用域插槽是一种特殊的插槽，它允许我们在插槽内部访问组件实例的数据，允许父组件将数据传递到子组件中，并在子组件中使用。在组件的模板中使用
<slot name="slotName" v-bind:slotData="data"></slot>定义作用域插槽，并在使用组件时，使用<template slot="slotName" v-slot="scope">来访问插槽内部的数据。
//子组件 son.vue
<view v-for="(item ,index) in listData" :key="index" >
<view class="slotWrap">
<slot
:index="index"
:item="item"
/>
</view>
</view>
//父组件 parent.vue
<view>
<son :list-data='cellData' @click="onClick">
<template slot-scope="item">
<view
:title="item.title"
@click="onClick(item.index)">
</view>
</template>
</son>
</view>
<script>
import son from './components/son.vue'
</script>父组件的slot-scope接受的item就是子组件传过来的对象，直接使用即可。
//子组件 son.vue
<view class="slotWrap">
<slot :data="data">
</slot>
</view>
//父组件 parent.vue
<view>
<template slot-scope="scope">
<span>{
{scope.row.ce}}</span>
</template>
</view>
<script>
import son from './components/son.vue'
</script>：：：如有不对欢迎补充