Astro项目中MDX文件传递Vue组件属性的正确方式

在使用Astro构建项目时，开发者经常会遇到需要在MDX文件中使用Vue组件并传递属性的场景。本文详细解析了这一问题及其解决方案。

问题背景

在Astro项目中，当开发者尝试通过内容集合(content collections)管理Vue组件文档时，可能会遇到无法正确传递属性到Vue组件的情况。具体表现为所有传递的属性值都变成了undefined。

错误示例

开发者通常会尝试以下写法：

---
title: 分页组件
description: 分页组件文档
---

import Pagination from "@/registry/Pagination.vue";

<Pagination client:only="vue" v-bind:total="100" v-bind:current-page="1" />

这种写法看似合理，但实际上会导致组件接收到的所有属性值都为undefined。

问题根源

这个问题的根本原因在于MDX文件使用的是JSX语法，而不是传统的Vue模板语法。在JSX中，属性传递的方式与Vue模板有所不同：

1. 不需要使用v-bind:前缀
2. 属性值需要用花括号{}包裹
3. 属性名遵循JSX的命名约定（驼峰式或kebab-case）

正确解决方案

正确的写法应该是：

---
title: 分页组件
description: 分页组件文档
---

import Pagination from "@/registry/Pagination.vue";

<Pagination client:only="vue" total={100} current-page={1} />

技术细节解析

1. JSX与Vue模板的区别：

   • Vue模板使用指令式语法(如v-bind, v-on)
   • JSX使用声明式语法，更接近JavaScript的表达方式

2. 属性命名转换：

   • 在JSX中，current-page会自动转换为Vue组件中的currentPage
   • 也可以直接使用驼峰命名currentPage

3. 动态值传递： 如果需要传递动态值，同样使用花括号：

   <Pagination total={pageCount} currentPage={current} />
   

最佳实践建议

1. 在MDX中使用Vue组件时，始终采用JSX语法传递属性
2. 保持属性命名一致性（推荐使用kebab-case）
3. 复杂属性建议先在frontmatter中定义，再通过解构传递

   ---
   pagination:
     total: 100
     current: 1
   ---
   
   <Pagination {...pagination} />
   

通过理解MDX的JSX本质和Vue组件的属性传递机制，开发者可以避免这类问题，更高效地在Astro项目中组织内容。