vue3 三层插槽传递

效果:

 

爷爷:

<template>
  <ElPlusCrud :searchList="searchList">
    <template #input2> xxx </template>
  </ElPlusCrud>
</template>

<script setup>
  import ElPlusCrud from '../../components/el-plus-crud/index.vue'
  import { reactive } from 'vue'

  const searchList = reactive([{ name: 'input1' }, { name: 'input2' }, { name: 'input3' }])
</script>

爸爸

<SearchCrud :searchList="props.searchList" >
  <template v-for="(item, index) in searchList" v-slot:[item.name] >
    <slot :name="item.name">
    </slot>
  </template>
</SearchCrud>

孙子

<el-form size="small" label-position="left">
  <el-row :gutter="20">
    <el-col v-for="(item, index) in searchList" :xs="24" :sm="12" :md="8" :lg="6">
      <el-form-item :label="item.name">
        <slot :name="item.name">
          <el-input></el-input>
        </slot>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>