主题
Vue 组件形态覆盖
Demo 使用真实 .vue 文件作为入口,并覆盖下列组件形式。
| 组件形态 | 文件示例 | 状态 |
|---|---|---|
| 传统 template SFC | TraditionalCard.vue | 完整 |
| template + 局部 JSX | LocalJsxInSfc.vue | 完整 |
| template + 局部 TSX | LocalTsxInSfc.vue | 完整 |
| Options API JSX render | OptionsRenderJsx.vue | 完整 |
| Options API TSX render | OptionsRenderTsx.vue | 完整 |
| 显式 functional SFC | FunctionalSfcJsx.vue / .tsx | 完整 |
| functional arrow sugar | FunctionalArrow.jsx / .tsx | 完整 |
| setup SFC | SetupSfcJsx.vue / .tsx | 完整 |
| setup render-instance | SetupRenderInstanceSfc.vue | 完整 |
| setup context | SetupContextSfc.vue | 完整 |
| setup JSX/TSX module | SetupModule.jsx / .tsx | 完整 |
| 独立 Options JSX/TSX | StandaloneJsx.jsx / .tsx | 完整 |
| 命名导出 HMR 组件 | HmrNamedCard.jsx | 完整 |
setup() 示例的业务源码全部遵守 Vue 2.7 标准,不使用组件 this。成员表达式 v-model 所需的 $set/_n/_q/_i 属于编译器生成代码,会按需捕获 getCurrentInstance().proxy。