在使用子组件时传入插槽 seach
<template #search>
<el-input v-model="searchForm.name" label="name" ></el-input>
<el-input v-model="searchForm.Activity" label="Activity" ></el-input>
<el-input v-model="searchForm.age" label="age" ></el-input>
</template>
子组件,$slots.search() search这是一个方法 返回的是数组,将拿到的数组遍历 调用<component :is="item"></component>就可以直接渲染 , 也可以做一些判断,我就将 原来的 el-input 外面包了一层 form 用于布局样式
<el-col :span="defaultSpan" v-for="(item, index) in $slots.search()" :key="index">
<el-form-item :label="item.props?.label">
<component :is="item"></component>
</el-form-item>
</el-col>