自定义组件开发

内置组件不够用时，在项目 components/ 目录编写自己的 Vue 组件。自动注册机制让组件开箱即用，无需任何配置。

components 目录结构

项目根目录的 components/ 下所有 .vue 文件自动注册：

my-deck/
└── components/
    ├── Counter.vue          # <Counter />
    ├── code-block.vue       # <CodeBlock />
    └── ui/
        └── Badge.vue        # <UiBadge />（子目录加前缀）

文件	组件名
Counter.vue	<Counter />
code-block.vue	<CodeBlock />
ui/Badge.vue	<UiBadge />

• 文件名驼峰化作为组件名
• 子目录名作为前缀（ui/Badge.vue → <UiBadge />）

Vue 单文件组件编写

组件是标准 Vue SFC（单文件组件）：

<template>
  <div class="badge" :style="{ background: color }">
    <slot />
  </div>
</template>

<script setup>
defineProps({
  color: { type: String, default: '#42b883' },
})
</script>

<style scoped>
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  color: white;
}
</style>

• <template>：组件结构，<slot /> 接收内容
• <script setup>：props、状态与逻辑
• <style scoped>：局部样式，不污染其他组件

组件注册

自动注册（推荐）

放入 components/ 目录即自动注册：

<Badge color="#e74c3c">重要</Badge>

无需 import、无需配置。

手动注册（局部）

在单个幻灯片中需要特殊组件时，可通过 setup 或引入方式使用，但自动注册已覆盖绝大多数场景。

注册来源汇总

来源	作用域
项目 components/	整个演示文稿
主题 components/	随主题生效
插件 components/	随插件生效

全局组件与局部组件

类型	注册方式	使用范围
全局组件	components/ 目录	所有幻灯片
局部组件	组件内 import	仅该组件内部

全局组件适合通用 UI（徽章、卡片、计数器）；局部组件用于组件内部组装，避免全局命名冲突。

交互式组件示例

带状态的计数器组件：

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div class="counter">
    <button @click="count++">+</button>
    <span>{{ count }}</span>
    <button @click="count--">-</button>
  </div>
</template>

<style scoped>
.counter {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 2rem;
}
</style>

<Counter />

开发调试

步骤	说明
编写组件	在 components/ 创建 .vue 文件
热更新	保存后演示立即刷新
使用	在 Markdown 中写 <组件名 />
检查	组件不显示时查看控制台报错

开发建议

建议	说明
组件单一职责	一个组件只做一类事情
props 设置默认值	增强组件的健壮性
样式用 scoped	避免样式泄漏
命名语义化	组件名体现用途

自定义组件把幻灯片从"展示内容"升级为"承载交互"，配合 Monaco 等能力可做出可现场操作的技术演示。