在Vue中，插槽是一种让父组件能够向子组件传递标记的方法。这里提供一个简单的自定义表格组件的例子，展示如何使用插槽来分发内容。
<template>
<div class="custom-table">
<div class="table-header">
<slot name="header"></slot>
</div>
<div class="table-body">
<slot></slot>
</div>
<div class="table-footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'CustomTable',
// 其他选项...
};
</script>
<style scoped>
.custom-table {
/* 样式定义 */
}
.table-header,
.table-footer {
/* 样式定义 */
}
.table-body {
/* 样式定义 */
}
</style>使用这个组件的方式如下：
<template>
<custom-table>
<template v-slot:header>
<h1>这是表格头部</h1>
</template>
<template v-slot:default>
<p>这是表格主体内容</p>
</template>
<template v-slot:footer>
<footer>这是表格底部信息</footer>
</template>
</custom-table>
</template>
<script>
import CustomTable from './components/CustomTable.vue';
export default {
components: {
CustomTable
}
};
</script>在这个例子中，CustomTable组件定义了三个插槽：一个名为header的默认插槽和两个具名插槽footer。在父组件中，我们使用v-slot指令来指定插槽的内容。