<!– 基本信息插槽 –>
<slot></slot>
<!– 明细信息插槽 –>
<slot></slot>
这里如何使用插槽？
在您提供的 WorkflowMainDialog 组件中，插槽的使用存在一个问题：模板中出现了两个默认插槽（即没有 name 属性的 <slot>）。在 Vue 中，一个组件可以有多个插槽，但只能有一个默认插槽，多余的默认插槽只有最后一个会生效，前面的会被覆盖。这会导致您期望的“基本信息插槽”和“明细信息插槽”无法同时正常工作。
如何正确使用插槽
1. 改为具名插槽
根据您的意图，应该将两个插槽定义为具名插槽，以便父组件可以分别向不同的位置分发内容。
修改组件的模板部分：
vue
<template>
<el-dialog …>
<template #default>
<!– 操作栏… –>
<!– 基本信息插槽（具名） –>
<slot name="basic"></slot>
<!– 明细信息插槽（具名） –>
<slot name="detail"></slot>
<!– 审批信息表格… –>
</template>
…
</el-dialog>
</template>
2. 在父组件中使用具名插槽
父组件使用时，通过 <template #插槽名> 来填充对应区域的内容：
vue
<WorkflowMainDialog
:capital-allocate="…"
@audited="handleAudited"
>
<!– 填充基本信息插槽 –>
<template #basic>
<div class="basic-info">
<p>项目名称：{{ projectName }}</p>
<p>申请金额：{{ applyAmount }}</p>
<!– 其他基本信息 –>
</div>
</template>
<!– 填充明细信息插槽 –>
<template #detail>
<el-table :data="allocateDatas" …>
<!– 明细表格列定义 –>
</el-table>
</template>
</WorkflowMainDialog>
3. 进阶：使用作用域插槽传递数据
您的组件内部已经通过 API 获取了 allocateDatas（资金分配明细）、auditDatas（审批信息）等数据。如果父组件需要基于这些数据来渲染插槽内容（比如渲染明细表格），您可以通过作用域插槽将这些数据暴露给父组件。
修改插槽定义，绑定需要传递的数据：
vue
<slot name="detail" :data="allocateDatas" :loading="loading" :editableFields="editableFieldNames"></slot>
父组件接收时，通过 v-slot 或 #detail 的解构来获取数据：
vue
<template #detail="{ data, loading, editableFields }">
<el-table v-loading="loading" :data="data">
<!– 根据 editableFields 动态控制列的可编辑性 –>
<el-table-column prop="deptName" label="部门" />
<el-table-column prop="amount" label="金额">
<template #default="{ row }">
<el-input v-if="editableFields.includes('amount')" v-model="row.amount" />
<span v-else>{{ row.amount }}</span>
</template>
</el-table-column>
<!– 更多列 –>
</el-table>
</template>
同理，基本信息插槽也可以传递需要的 props，例如 capitalAllocate 对象。
总结
-
当前问题：两个默认插槽无法同时生效，应改为具名插槽。
-
解决方案：
-
将 <slot> 添加 name 属性，变为具名插槽。
-
在父组件中使用 v-slot:插槽名（或 #插槽名）指定内容插入位置。
-
如果需要传递数据，使用作用域插槽（在 <slot> 上绑定属性，父组件通过作用域变量接收）。
这样修改后，您的组件将具备更好的灵活性和可扩展性，父组件可以按需定制基本信息和明细信息的展示内容，同时又能复用组件的操作栏、审批信息表格和业务逻辑。
可以这样写吗？<slot name="basic" />
是的，可以这样写。使用 <slot name="basic" /> 定义了一个名为 'basic' 的具名插槽，这是 Vue 3 组合式语法 <script setup> 中正确的插槽声明方式。
如何使用这个具名插槽？
在父组件中，通过 <template #basic> 或 <template v-slot:basic> 来填充内容：
vue
<WorkflowMainDialog :capital-allocate="…">
<template #basic>
<!– 这里是您想要插入的基本信息内容 –>
<div>项目基本信息</div>
</template>
<!– 其他插槽… –>
</WorkflowMainDialog>
如果需要传递数据
如果希望插槽内容能访问组件内部的数据（如 capitalAllocate 或 loading 状态），可以改为作用域插槽：
vue
<slot name="basic" :capitalAllocate="capitalAllocate" :loading="loading"></slot>
父组件接收数据：
vue
<template #basic="{ capitalAllocate, loading }">
<div v-loading="loading">
{{ capitalAllocate?.projectName }}
</div>
</template>
根据您的实际需求选择合适的写法即可。
