Vue：slot插槽

下面是一个完整的示例，展示如何在Vue中使用插槽：

<template>
  <div>
    <h2>这是父组件</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
};
</script>

在上面的示例中，我们定义了一个名为 ParentComponent 的父组件，并在模板中使用了 <slot> 标签来指定插槽的位置。<slot></slot> 表示插槽的起始和结束。

接下来，我们可以在父组件的使用者中添加内容来填充插槽。例如，假设我们在父组件的使用者中编写以下代码：

<template>
  <div>
    <parent-component>
      <h3>这是插入到插槽中的标题</h3>
      <p>这是插入到插槽中的段落</p>
    </parent-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {
    ParentComponent
  }
};
</script>

在上面的代码中，我们在父组件 <parent-component> 标签的内部添加了一个 <h3>标题和一个 <p>段落。这些内容将填充父组件中的插槽。

当我们运行这个Vue应用时，父组件将会展示如下的内容：

<div>
  <h2>这是父组件</h2>
  <h3>这是插入到插槽中的标题</h3>
  <p>这是插入到插槽中的段落</p>
</div>

通过使用插槽，我们可以在父组件的使用者中动态添加内容，使得父组件更加灵活和可定制。