你不知道的Vue3插槽用法

透传插槽内容

自定义组件时想把插槽内容直接传递给另一个组件时，避免列出原组件拥有的所有插槽。可以使用下面的方式， 例子，在使用van-search组件时ios上要加上form标签键盘才能出现搜索按钮，所以单独封装了一个组件(VSearch)，但是van-search有很多插槽，不想挨个罗列。

<form action="/">
  <van-search v-bind="$attrs"> <!--v-bind="$attrs" 传递所有props-->
    <template v-for="(item, key) in $slots" :key="key" v-slot:[key]> <!--关键代码，v-slot:[key]为动态插槽名-->
      <slot :name="key"></slot>
    </template>
  </van-search>
</form>

使用方式：

<v-search v-model="searchText" show-action placeholder="请输入关键词搜索" @search="onSearch">
  <template #action>
    <span @click="onSearch">搜索</span>
  </template>
</v-search>

这里action插槽的内容就直接传递过去了。当然不使用template模版，直接用render函数就更简单了，直接把slots内容放到h函数中就可以了。

自定义列表项内容

比如在使用van-steps组件时，想要封装一下统一控制van-step的左侧状态图标，避免在使用时给每一个step都设置图标让代码结构显得冗余，所以这里统一封装到一个组件里（VSteps），方便统一管理和维护。

<template>
  <van-steps class="process-record" direction="vertical" :active="active">
    <van-step v-for="(item, index) in data" :key="keyName ? item[keyName] : index"> 
      <template #active-icon>
        <div class="active-icon"></div>
      </template>
      <template #finish-icon>
        <div class="finish-icon"></div>
      </template>
      <template #inactive-icon>
        <div class="inactive-icon"></div>
      </template>
      <slot :item="item"></slot><!--关键代码-->
    </van-step>
  </van-steps>
<template>
<script lang="ts" setup>
defineProps({
  active: {
    type: [Number, String],
  },
  data: {
    type: Array,
  },
  keyName: {
    type: String,
  },
})
</script>

使用方式：

<VSteps :data="stepData" keyName="id" :active="0">
  <template #default="{item}"> <!--直接能获取到每一项的数据-->
    <div class="mb-15 text-gray-500">{{item.date}}</div>
  </template>
</VSteps>

这里就能直接获取到每一项的数据了，就方便根据具体的业务写展示的内容了。