Vue.js前端框架教程9：Vue插槽slot用法

插槽（Slots）

在 Vue 中，插槽（Slots）是一种组件内容分发的机制，允许你将内容从父组件传递到子组件的模板中。插槽可以有名字，这样你就可以在子组件中定义多个插槽，并且在父组件中指定哪些内容应该放入哪个插槽。

以下是一些常见的插槽用法，包括 header、footer 和 reference 插槽：

无名插槽（默认插槽）

无名插槽是最简单的插槽类型，如果没有指定插槽的名字，那么它就是默认插槽。

子组件：

<template>
  <div>
    <slot></slot> <!-- 默认插槽内容将在这里渲染 -->
  </div>
</template>

父组件：

<template>
  <ChildComponent>
    <p>这是一些默认插槽内容。</p>
  </ChildComponent>
</template>

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

具名插槽

具名插槽允许你在一个组件中有多个内容插入点。

子组件：

<template>
  <div>
    <slot name="header"></slot> <!-- header 插槽内容将在这里渲染 -->
    <slot name="default"></slot> <!-- 默认插槽内容将在这里渲染 -->
    <slot name="footer"></slot> <!-- footer 插槽内容将在这里渲染 -->
  </div>
</template>

父组件：

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
    <p>这是默认插槽内容。</p>
    <template v-slot:footer>
      <p>这是底部内容</p>
    </template>
  </ChildComponent>
</template>

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

reference 插槽

reference 插槽通常用于定义一个触发元素，例如在弹出组件中。

子组件：

<template>
  <div>
    <slot name="reference"></slot> <!-- 触发元素将在这里渲染 -->
    <div>弹出内容...</div>
  </div>
</template>

父组件：

<template>
  <ChildComponent>
    <template v-slot:reference>
      <button>点击我</button>
    </template>
  </ChildComponent>
</template>

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

在这个例子中，<button> 元素是触发弹出的参考元素，当用户点击按钮时，子组件会显示弹出内容。

使用 v-slot 的缩写语法

在 Vue 2.6.0+ 和 Vue 3 中，你可以使用 v-slot 的缩写语法 #：

父组件（使用缩写语法）：

<template>
  <ChildComponent>
    <template #header>
      <h1>这是头部内容</h1>
    </template>
    <p>这是默认插槽内容。</p>
    <template #footer>
      <p>这是底部内容</p>
    </template>
  </ChildComponent>
</template>

这种缩写语法使得模板更加简洁易读。记住，无论是使用完整的 v-slot 语法还是缩写语法，插槽的用法都是相同的。