Vue插槽(slot)的使用

Vue插槽(slot)是一种强大的功能，它允许您在组件模板中插入自定义内容。插槽可以让你更灵活地构建组件，以满足不同的使用场景。

使用说明：

1. 定义插槽：在组件模板中，使用<slot>标签来定义插槽。
2. 使用插槽：在父组件中，将需要插入到插槽中的内容放在<template>标签中，并在<slot>标签上添加一个名字属性，指定插槽的名称。

代码示例：

假设我们有一个名为BaseCard的组件，它包含一个标题和一个内容区域，但具体的内容需要根据父组件的需求来定制：

BaseCard.vue:

<template>
<div class="card">
<h2 class="card-title">
<slot name="title"></slot>
</h2>
<div class="card-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'BaseCard'
};
</script>

在父组件中使用BaseCard组件，并为其添加自定义内容：

ParentComponent.vue:

<template>
<div>
<BaseCard>
<template v-slot:title>
<h1>这是自定义的标题</h1>
</template>
<p>这是自定义的内容。</p>
</BaseCard>
</div>
</template>
<script>
import BaseCard from './BaseCard.vue';
export default {
components: { BaseCard }
};
</script>

在上面的例子中，我们为BaseCard组件定义了两个插槽：一个名为"title"的插槽和一个默认插槽。在父组件中，我们通过<template v-slot:title>标签为"title"插槽提供了自定义内容，而默认插槽则自动接收<p>这是自定义的内容。</p>作为内容。