从链式迁移到组件
链式组件仍可用,但新项目主线是宏组件。
Counter 对照
链式:
ts
ElfUI.createComponent()
.name("elf-counter")
.setup(() => {
const count = useRef(0);
return { count, inc: () => count.set(count.peek() + 1) };
})
.template(`<button @click="inc">{{ count }}</button>`)
.register();宏组件:
ts
const count = useRef(0);
const inc = (): void => count.set(count.peek() + 1);
export const Counter = defineHtml(` <button @click=${inc}>${count}</button> `);迁移规则
| 链式 | 宏组件 |
|---|---|
.name() | 导出名推断或 defineName() |
.props() | defineProps() |
.emits() | defineEmits() |
.template() | defineHtml(...) |
.style() | defineStyle(...) |
.use() | useComponents() |
.formControl() | defineOptions({ formControl: true }) |
迁移时先保持模板行为不变,再逐步改类型和样式组织。
