[{"data":1,"prerenderedAt":601},["ShallowReactive",2],{"sidebar-page":3,"page-\u002Fmarkdown-vue-usage-2026-09-18":4},null,{"id":5,"title":6,"author":7,"body":8,"cover":3,"date":590,"description":21,"extension":591,"meta":592,"navigation":116,"path":593,"seo":594,"stem":595,"tags":596,"__hash__":600},"content\u002Fmarkdown-vue-usage-2026-09-18.md","关于在 Markdown 中嵌入 Vue 组件的说明","AeYunDian",{"type":9,"value":10,"toc":586},"minimark",[11,18,23,39,44,50,188,191,583],[12,13,14],"blockquote",{},[15,16,17],"p",{},"这篇文章已经过时，此描述的内容与现有架构不相同",[19,20,22],"script",{"setup":21},"","\nimport { ref } from 'vue'\nimport GovPanel from '@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovPanel.vue'\nimport GovButton from '@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovButton.vue'\nimport { showAlert } from '@\u002Findex\u002Fcomponents\u002Fcommon\u002Fdialog'\n\nconst count = ref(0)\nconst showTip = ref(true)\n\nfunction increment() {\n    count.value += 1\n}\n\nfunction handleAlert() {\n    showAlert('来自文章内的事件')\n}\n",[15,24,25,26,30,31,34,35,38],{},"本站的 ",[27,28,29],"code",{},".md"," 文件由 ",[27,32,33],{},"unplugin-vue-markdown"," 在构建时编译为 Vue 单文件组件。正文中的 Vue 组件标签会被当作模板的一部分解析，",[27,36,37],{},"\u003Cscript setup>"," 中的逻辑对正文完全可见。现将使用方法说明如下。",[40,41,43],"h2",{"id":42},"一基本用法","一、基本用法",[15,45,46,47,49],{},"在 frontmatter 之后、正文之前书写 ",[27,48,37],{},"，导入所需组件与响应式 API 即可。",[51,52,56],"pre",{"className":53,"code":54,"language":55,"meta":21,"style":21},"language-vue shiki shiki-themes monokai","\u003Cscript setup>\nimport { ref } from \"vue\";\nimport GovButton from \"@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovButton.vue\";\n\nconst count = ref(0);\n\u003C\u002Fscript>\n\n正文中可以像这样使用：\n\u003CGovButton variant=\"primary\">按钮\u003C\u002FGovButton>\n","vue",[27,57,58,77,96,111,118,144,154,159,165],{"__ignoreMap":21},[59,60,63,67,70,74],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sCdxs","\u003C",[59,68,19],{"class":69},"s8I7P",[59,71,73],{"class":72},"sHkqI"," setup",[59,75,76],{"class":65},">\n",[59,78,80,83,86,89,93],{"class":61,"line":79},2,[59,81,82],{"class":69},"import",[59,84,85],{"class":65}," { ref } ",[59,87,88],{"class":69},"from",[59,90,92],{"class":91},"s_Ekj"," \"vue\"",[59,94,95],{"class":65},";\n",[59,97,99,101,104,106,109],{"class":61,"line":98},3,[59,100,82],{"class":69},[59,102,103],{"class":65}," GovButton ",[59,105,88],{"class":69},[59,107,108],{"class":91}," \"@\u002Findex\u002Fcomponents\u002Fcommon\u002FGovButton.vue\"",[59,110,95],{"class":65},[59,112,114],{"class":61,"line":113},4,[59,115,117],{"emptyLinePlaceholder":116},true,"\n",[59,119,121,125,128,131,134,137,141],{"class":61,"line":120},5,[59,122,124],{"class":123},"sOx1s","const",[59,126,127],{"class":65}," count ",[59,129,130],{"class":69},"=",[59,132,133],{"class":72}," ref",[59,135,136],{"class":65},"(",[59,138,140],{"class":139},"s7s5_","0",[59,142,143],{"class":65},");\n",[59,145,147,150,152],{"class":61,"line":146},6,[59,148,149],{"class":65},"\u003C\u002F",[59,151,19],{"class":69},[59,153,76],{"class":65},[59,155,157],{"class":61,"line":156},7,[59,158,117],{"emptyLinePlaceholder":116},[59,160,162],{"class":61,"line":161},8,[59,163,164],{"class":65},"正文中可以像这样使用：\n",[59,166,168,170,173,176,178,181,184,186],{"class":61,"line":167},9,[59,169,66],{"class":65},[59,171,172],{"class":69},"GovButton",[59,174,175],{"class":72}," variant",[59,177,130],{"class":65},[59,179,180],{"class":91},"\"primary\"",[59,182,183],{"class":65},">按钮\u003C\u002F",[59,185,172],{"class":69},[59,187,76],{"class":65},[15,189,190],{},"组件标签与 Markdown 语法可以混用。以下为实际渲染效果：",[192,193,195,196,195,203,213,214,217,195,219,223,234,238,249],"gov-panel",{"title":194},"示例一：响应式计数器","\n  ",[15,197,198,199],{},"当前计数：",[200,201,202],"b",{},"{{ count }}",[204,205,207,208,212],"govbutton",{"variant":206},"primary","\n    ",[209,210],"myicon",{"icon":211},"plus"," 增加\n  "," ",[215,216],"br",{},[215,218],{},[204,220,222],{"variant":221},"default","重置",[224,225,229,230,233],"div",{"className":226},[227,228],"md-alert","md-alert--tip","\n  文章内的 ",[27,231,232],{},"ref"," 是独立的响应式状态，作用域限于当前文章的组件实例，不会与其他文章或站点状态相互影响。\n",[40,235,237],{"id":236},"二条件渲染与列表渲染","二、条件渲染与列表渲染",[15,239,240,241,244,245,248],{},"Vue 的 ",[27,242,243],{},"v-if","、",[27,246,247],{},"v-for"," 等指令在正文中同样有效。",[192,250,195,252,195,258,195,266,273,282,291,295,298],{"title":251},"示例二：条件渲染",[204,253,207,254,257],{"variant":206},[209,255],{"icon":256},"eye"," 切换显示\n  ",[15,259,262,263,265],{"v-if":260,"style":261},"showTip","margin-top: 12px;","\n    这段文字由 ",[27,264,243],{}," 控制，当前可见。\n  ",[15,267,262,269,272],{"v-else":21,"style":268},"margin-top: 12px; color: #999;",[27,270,271],{},"v-else"," 控制，当前显示的是它。\n  ",[15,274,275,276,278,279,281],{},"下面的列表由 ",[27,277,247],{}," 渲染，数据来自文章内的 ",[27,280,37],{},"：",[283,284,195,285],"ul",{},[286,287,290],"li",{"v-for":288,":key":289},"i in 3","i","第 {{ i }} 项，共 3 项",[40,292,294],{"id":293},"三嵌入组件","三、嵌入组件",[15,296,297],{},"本站提供的政务组件均可在正文中直接使用。",[192,299,195,302,195,311,324],{"title":300,"tone":301},"示例三：组件组合","red",[15,303,304,305,307,308,281],{},"以下按钮均为 ",[27,306,172],{}," 组件的不同 ",[27,309,310],{},"variant",[224,312,207,314,207,317,207,321,195],{"style":313},"display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px;",[204,315,316],{"variant":206},"主要操作",[204,318,320],{"variant":319},"danger","危险操作",[204,322,323],{"variant":221},"次要操作",[192,325,195,327,345,349,356],{"title":326},"示例四：图标使用",[15,328,207,329,332,333,336,337,340,341,344],{},[209,330],{"icon":331},"download"," 下载\n    ",[209,334],{"icon":335},"web"," 官网\n    ",[209,338],{"icon":339},"code-tags"," 源码\n    ",[209,342],{"icon":343},"file-document-outline"," 文档\n  ",[40,346,348],{"id":347},"四事件绑定","四、事件绑定",[15,350,351,352,355],{},"组件上的 ",[27,353,354],{},"@click"," 等事件可以直接绑定到文章内的函数。",[192,357,195,359,362,365,463,467,481,507,529,536,554,568,572,575],{"title":358},"示例五：事件处理",[204,360,361],{"variant":206},"\n    点击弹出提示\n  ",[15,363,364],{},"实际写法如下：",[51,366,368],{"className":53,"code":367,"language":55,"meta":21,"style":21},"\u003Cscript setup>\nfunction handleAlert() {\n  alert(\"来自文章内的事件\");\n}\n\u003C\u002Fscript>\n\n\u003CGovButton variant=\"primary\" @click=\"handleAlert\">\n  点击弹出提示\n\u003C\u002FGovButton>\n",[27,369,370,380,391,403,408,416,420,450,455],{"__ignoreMap":21},[59,371,372,374,376,378],{"class":61,"line":62},[59,373,66],{"class":65},[59,375,19],{"class":69},[59,377,73],{"class":72},[59,379,76],{"class":65},[59,381,382,385,388],{"class":61,"line":79},[59,383,384],{"class":123},"function",[59,386,387],{"class":72}," handleAlert",[59,389,390],{"class":65},"() {\n",[59,392,393,396,398,401],{"class":61,"line":98},[59,394,395],{"class":72},"  alert",[59,397,136],{"class":65},[59,399,400],{"class":91},"\"来自文章内的事件\"",[59,402,143],{"class":65},[59,404,405],{"class":61,"line":113},[59,406,407],{"class":65},"}\n",[59,409,410,412,414],{"class":61,"line":120},[59,411,149],{"class":65},[59,413,19],{"class":69},[59,415,76],{"class":65},[59,417,418],{"class":61,"line":146},[59,419,117],{"emptyLinePlaceholder":116},[59,421,422,424,426,428,430,432,435,438,440,443,446,448],{"class":61,"line":156},[59,423,66],{"class":65},[59,425,172],{"class":69},[59,427,175],{"class":72},[59,429,130],{"class":65},[59,431,180],{"class":91},[59,433,434],{"class":65}," @",[59,436,437],{"class":72},"click",[59,439,130],{"class":65},[59,441,442],{"class":65},"\"",[59,444,445],{"class":65},"handleAlert",[59,447,442],{"class":65},[59,449,76],{"class":65},[59,451,452],{"class":61,"line":161},[59,453,454],{"class":65},"  点击弹出提示\n",[59,456,457,459,461],{"class":61,"line":167},[59,458,149],{"class":65},[59,460,172],{"class":69},[59,462,76],{"class":65},[40,464,466],{"id":465},"五注意事项","五、注意事项",[15,468,469,470,474,475,477,478,480],{},"（一）",[471,472,473],"strong",{},"组件需要显式导入","。方案 B 下文章是独立的 Vue 组件，组件不会自动注册。必须在 ",[27,476,37],{}," 中 ",[27,479,82],{},"，不能依赖全局注册。",[15,482,483,484,487,488,491,492,495,496,499,500,244,503,506],{},"（二）",[471,485,486],{},"自定义组件请显式闭合","。markdown-it 在处理块级 HTML 时，自闭合的自定义组件标签（",[27,489,490],{},"\u003CMyIcon ... \u002F>","）容易丢失自闭合标志，导致 Vue 编译器报 ",[27,493,494],{},"Element is missing end tag","。建议所有自定义组件都写成 ",[27,497,498],{},"\u003CMyIcon ...>\u003C\u002FMyIcon>","，HTML void 元素（",[27,501,502],{},"\u003Cbr>",[27,504,505],{},"\u003Cimg>","）不受影响。",[15,508,509,510,513,514,517,518,517,521,524,525,528],{},"（三）",[471,511,512],{},"旧版容器语法不再生效","。本站早期的 ",[27,515,516],{},"::: tip"," \u002F ",[27,519,520],{},"::: warning",[27,522,523],{},"::: tabs"," 等自定义容器已在迁移中移除，改用原生 HTML 类表达，例如 ",[27,526,527],{},"\u003Cdiv class=\"md-alert md-alert--tip\">…\u003C\u002Fdiv>","。",[15,530,531,532,535],{},"（四）",[471,533,534],{},"构建时编译","。正文中的组件在构建阶段编译为 render function，而非运行时解析。若组件名拼写错误，会在构建时或开发时控制台提示，而不会静默忽略。",[15,537,538,539,542,543,546,547,550,551,553],{},"（五）",[471,540,541],{},"样式作用域","。文章内联写的 ",[27,544,545],{},"style"," 属性作用于当前元素，Markdown 渲染出的标签样式由 ",[27,548,549],{},"markdown.css"," 统一控制。若需要局部样式，建议在文章内使用内联 ",[27,552,545],{},"，或封装为独立组件。",[15,555,556,557,564,565,567],{},"（六）",[471,558,559,560,563],{},"不要写 ",[27,561,562],{},"\u003Cstyle>"," 块","。本站暂不支持在 Markdown 中书写 ",[27,566,562],{},"，会与 SFC 编译流程冲突。需要样式时优先使用已有 CSS 变量或内联样式。",[40,569,571],{"id":570},"六小结","六、小结",[15,573,574],{},"Markdown 与 Vue 的融合让静态内容具备了组件化的能力。文章不再只是纯文本，而是可以拥有响应式状态、可复用组件与事件交互的完整页面单元。这使得一些原本需要额外页面承载的功能，可以直接在文章内表达。",[15,576,577,578,528],{},"如需查看本站组件清单，可参阅",[579,580,582],"a",{"href":581},"\u002Fsite-design-compliance-2026-09-16","《关于本站对照国办发〔2017〕47号文开展设计规范调整的说明》",[545,584,585],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":21,"searchDepth":79,"depth":79,"links":587},[588,589],{"id":42,"depth":79,"text":43},{"id":236,"depth":79,"text":237},"2026-09-18","md",{},"\u002Fmarkdown-vue-usage-2026-09-18",{"title":6,"description":21},"markdown-vue-usage-2026-09-18",[597,598,599],"Vue","Markdown","内容层","pLUYvePhQ2UO_ExUlCY-OCrjlRk013xQpue_6Xm0wzs",1794733997163]