如何使用插槽创建可重用的组件模板？

在使用插槽（Slots）创建可重用组件模板时，我们通常是在组件内部定义一个或多个插槽，这样使用该组件的开发者就可以在这些插槽中填充自定义的内容或组件。这种方法在多种前端框架中都有应用，比如 Vue.js 和 React。

以 Vue.js 为例，插槽是一种使得父组件能向子组件插入内容的机制。这不仅使得组件更加灵活，还能保持代码的清晰和可维护性。

示例详解

假设我们要创建一个可复用的 <Card> 组件，这个组件有标题、内容和尾部操作区三个部分，每部分的内容都希望在使用时定制。

Card.vue:

vue
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">默认标题</slot>
    </div>
    <div class="card-body">
      <slot>默认内容</slot>
    </div>
    <div class="card-footer">
      <slot name="footer">默认操作</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style>
.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
}
.card-header, .card-footer {
  padding: 10px;
  background-color: #f7f7f7;
}
.card-body {
  padding: 10px;
}
</style>

在这个组件中，我们定义了三个插槽：header、默认插槽（无名字）和footer。每个插槽都提供了默认内容，以便在使用者不提供内容时显示默认值。

使用方式

使用 <Card> 组件时，可以这样插入自定义内容：

vue
<template>
  <Card>
    <template v-slot:header>
      <h1>这是标题</h1>
    </template>
    <p>这是一些卡片内容...</p>
    <template v-slot:footer>
      <button>操作按钮</button>
    </template>
  </Card>
</template>

这里，我们使用了 <template> 标签和 v-slot 指令来指定每个插槽的内容。header 和 footer 插槽使用了命名插槽，而卡片的主体内容使用了默认插槽。

结论

通过这种方式，<Card> 组件变得非常灵活，可以在不同的页面和场景下复用，每次使用时都可以定制化内容。这样的设计方法不仅提高了代码的复用性，也使得组件的每个部分都保持了良好的可定制性和独立性。