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