Vue 组件使用

Slidev 底层是 Vue 3，幻灯片里可以直接使用 Vue 组件——把交互能力带进演示。本章讲解"使用"层面：直接写、自动导入、传参、插槽。

在 Markdown 中使用 Vue 组件

任意已注册的 Vue 组件都可以像 HTML 标签一样写进 Markdown：

<Counter :count="42" />

<Tweet id="1234567890" />

• 组件名即标签名（Counter → <Counter />）
• 支持属性、props、事件
• 与 MDC 写法等价，二选一保持一致即可

unplugin-vue-components 自动导入

Slidev 内置 unplugin-vue-components，components/ 目录下的组件自动注册，无需手动 import：

my-deck/
└── components/
    ├── Counter.vue
    └── MyChart.vue

<Counter />

<MyChart />

自动导入规则：

目录	处理方式
components/	所有 .vue 文件自动注册为全局组件
主题的 components/	随主题自动可用
插件的 components/	随插件自动可用

组件名按文件名驼峰化：counter-box.vue → <CounterBox />。

Props 传递

组件接收 props，直接在标签上写属性：

<Counter :count="10" label="访问量" />

<MyChart type="bar" :data="[1, 2, 3]" />

写法	含义
label="文本"	字符串 props（静态）
:count="10"	表达式 props（动态，数字/布尔/对象）
:data="[1,2,3]"	数组/对象字面量

:xxx 冒号前缀表示 Vue 绑定语法，右侧按 JavaScript 表达式求值；无冒号则为普通字符串。

Slot 插槽

组件的内容区域用插槽填充：

<Card>
  这里是插槽内容，会渲染到组件的插槽位置。
</Card>

具名插槽

<LayoutBox>
  <template #header>
    头部内容
  </template>

  <template #default>
    正文内容
  </template>
</LayoutBox>

• #default：默认插槽
• #header：具名插槽（与组件内 <slot name="header" /> 对应）

使用场景示例

计数器组件

# 实时统计

<Counter :count="start" />

# 交互演示

<DemoBox>
  <button @click="count++">点击</button>
</DemoBox>

数据展示

<MyChart :data="monthly" type="line" />

组件的 props 数据可以来自幻灯片 Frontmatter 或组件内部状态。

组件使用速查

操作	写法
使用全局组件	<Counter />
传字符串 props	label="访问量"
传动态 props	:count="42"
默认插槽	<Card>内容</Card>
具名插槽	<template #header>
自动注册	放入 components/ 目录

Vue 组件让幻灯片突破"静态内容"的限制：实时计算、交互按钮、动态图表都能嵌入页面，这也是 Slidev「可交互」优势的底层来源。