Vue中的插槽(Slot)详解

插槽的分类

1. 在Vue中，插槽的使用方式可以分为三种：匿名插槽（默认插槽）、具名插槽和作用域插槽。

匿名插槽（默认插槽）

1. 匿名插槽在子组件中给定位置后，在父组件就是直接在写在子组件标签中，它会自动占用子组件给定的位置

//子组件 son.vue
<slot>
  <span> (匿名插槽) 我是默认插槽，没给我传内容就会默认显示这句话 </span>
</slot>

//父组件 parent.vue
<template>
    <view>
        <son>
            <span>匿名插槽内容</span>
        </son>
    </view>
</template>

<script>
import son from './components/son.vue'
</script>

具名插槽

1. 具名插槽允许我们在组件中定义多个插槽，并且可以根据插槽的名称来传递内容。
2. 在组件的模板中使用<slot name="slotName"></slot>定义具名插槽，然后在使用组件时，使用<template v-slot:slotName>或者<template slot="slotName">来传递内容给指定的插槽。
3. 如果在使用具名插槽时没有标注  <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>

作用域插槽

1. 作用域插槽是一种特殊的插槽，它允许我们在插槽内部访问组件实例的数据，允许父组件将数据传递到子组件中，并在子组件中使用。在组件的模板中使用<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>

：：：如有不对欢迎补充