Skip to content

Vue 组件形态覆盖

Demo 使用真实 .vue 文件作为入口,并覆盖下列组件形式。

组件形态文件示例状态
传统 template SFCTraditionalCard.vue完整
template + 局部 JSXLocalJsxInSfc.vue完整
template + 局部 TSXLocalTsxInSfc.vue完整
Options API JSX renderOptionsRenderJsx.vue完整
Options API TSX renderOptionsRenderTsx.vue完整
显式 functional SFCFunctionalSfcJsx.vue / .tsx完整
functional arrow sugarFunctionalArrow.jsx / .tsx完整
setup SFCSetupSfcJsx.vue / .tsx完整
setup render-instanceSetupRenderInstanceSfc.vue完整
setup contextSetupContextSfc.vue完整
setup JSX/TSX moduleSetupModule.jsx / .tsx完整
独立 Options JSX/TSXStandaloneJsx.jsx / .tsx完整
命名导出 HMR 组件HmrNamedCard.jsx完整

setup() 示例的业务源码全部遵守 Vue 2.7 标准,不使用组件 this。成员表达式 v-model 所需的 $set/_n/_q/_i 属于编译器生成代码,会按需捕获 getCurrentInstance().proxy

查看完整 Demo 页面和运行命令 →

基于 Oxc Parser 的 Vue 2.7 JSX/TSX 转换器