局部组件

useComponents() 用于在当前组件模板里使用导入的组件。

import { defineHtml, useComponents } from "@elfui/core";
import { ElfButton } from "./Button";

useComponents(ElfButton);

export const Toolbar = defineHtml(` <elf-button>保存</elf-button> `);

也可以设置别名：

useComponents({ PrimaryAction: ElfButton });

export const Toolbar = defineHtml(` <primary-action>保存</primary-action> `);

和全局注册的关系

createApp(App).mount("#app") 用于注册并挂载应用根组件；app.component(Component) 或 registerComponents() 都只会把组件按其编译期 tag 注册到浏览器全局 customElements；useComponents() 是组件内部的局部依赖声明。

TIP

组件库更推荐局部组件，因为依赖关系清楚，模板类型检查也能知道子组件的 props、事件和 slots。