Vue中的slot标签的作用

<slot> 标签是Vue中的一个特殊标签，用于在父组件中插入子组件的内容。它允许你在父组件模板中预留一个位置，然后在使用这个父组件时，将具体内容插入到这个预留位置。

这在构建可复用组件时非常有用，因为它允许你将组件的结构和样式与内容分离，使组件更灵活和通用。

以下是一个使用 <slot> 的简单示例：

ChildComponent.vue（子组件）：

<template>
  <div class="child-component">
    <h2>子组件</h2>
    <slot></slot> <!-- 这里将插入父组件的内容 -->
  </div>
</template>

<style>
.child-component {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

ParentComponent.vue（父组件）：

<template>
  <div class="parent-component">
    <h1>父组件</h1>
    <child-component>
      <!-- 这里的内容将插入到子组件的 <slot> 中 -->
      <p>这是插入到子组件的内容。</p>
      <button>点击我</button>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
};
</script>

<style>
.parent-component {
  margin: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这个示例中，子组件 ChildComponent 中的 <slot> 标签表示在这个位置将插入父组件中使用 <child-component> 标签时的具体内容。在父组件中，我们通过在 <child-component> 中放置内容来插入这些内容到子组件的 <slot> 中。

当父组件渲染时，插入到子组件的内容将会被正确地渲染到 <slot> 所在的位置。这使得你可以在子组件的基础上创建更具体的内容，实现更高度的可复用性和灵活性。