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>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)