Vue3 中插槽(slot)的用法

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码

匿名插槽

子组件

<template>
    <div>
        <h1>Hello</h1>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

父组件

<template>
  <div>
    <zh-slot>
      <template v-slot>
        <div>
          匿名插槽
        </div>
      </template>
    </zh-slot>
  </div>
</template>

<script setup lang="ts">
import zhSlot from './components/zhSlot.vue'

</script>

<style scoped>

</style>

具名插槽

当有多个插槽时，插槽增加了name属性来正确渲染对应的部分，父组件需要使用。可以认为匿名插槽是特殊的具名插槽

子组件

<template>
    <div>
        <h1>Hello</h1>
        <!-- 匿名插槽 -->
        <slot></slot>  
        <!-- 具名插槽 -->
        <slot  name="value"></slot>
        <slot  name="value1"></slot>
        <slot  name="value2"></slot>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

父组件

<template>
  <div>
    <zh-slot>
      <template v-slot>
        <div>
          匿名插槽
        </div>
      </template>
      <template v-slot:value>
        <div>
          具名插槽1
        </div>
      </template>
      <template v-slot:value1>
        <div>
          具名插槽2
        </div>
      </template>
      <template v-slot:value2>
        <div>
          具名插槽3
        </div>
      </template>
    </zh-slot>
  </div>
</template>

<script setup lang="ts">
import zhSlot from './components/zhSlot.vue'

</script>

<style scoped>

</style>

作用域插槽

让父级插槽内容能够访问子组件数据，数据从子组件往父组件流动。子组件通过插槽prop（任意个数）来绑定数据，父组件通过带值（命名随意）的v-slot来获取子组件的数据。

子组件

<template>
    <div>
        <!-- 作用域插槽 -->
        <div v-for="(item, index) in list" :key="index">
            <!-- data 可以随便定义 -->
            <slot :data="item" :index="index"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

type H = {
    name:string,
    age:number
}

let list = reactive<H[]>([
    {
        name: '小张',
        age: 18
    },
    {
        name: '小张',
        age: 19
    },
    {
        name: '小张',
        age: 20
    }
])

</script>

<style scoped>

</style>

父组件

<template>
  <div>
    <zh-slot>
      <template #default="{ data, index }">
        <div>
          {{ data.name }} ---- {{ data.age }} ---- {{ index }}
        </div>
      </template>
    </zh-slot>
  </div>
</template>

<script setup lang="ts">
import zhSlot from './components/zhSlot.vue'

</script>

<style scoped>

</style>