Skip to content

从链式迁移到组件

链式组件仍可用,但新项目主线是宏组件。

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 })

迁移时先保持模板行为不变,再逐步改类型和样式组织。