基础

在 qingkuai 中，组件是构建用户界面的基本单位，每一个组件都代表着一个独立、可复用的界面片段，既可以是一个简单的按钮，也可以是一个复杂的页面。组件天然具有封装性和组合性，使界面开发更加清晰、高效。

下面的图片展示了一个博客页面的组件化表示，其中每个区域都表示一个组件，相同颜色的区域表示组件的复用：

定义及使用

qingkuai 的组件定义采取了与 vue 和 svelte 相同的方式，即文件级组件定义。每个组件被定义在一个扩展名为 .qk 文件中，经编译器处理后，这个文件会被转换为一个具有默认导出的 Javascript 模块。

假设我们已经通过 Component.qk 文件定义了一个组件，在其他组件文件中，可以通过 import 语法 导入，并在模板部分添加与导入标识符名称相同的标签来重复使用它：

<lang-js>
    import Component from "./path/to/Component.qk"
</lang-js>

<Component />
<Component />

组件名称支持使用串型（kebab）格式，下面的写法是等效的：

<MyComponent />
<my-component />

默认情况下，格式化组件文件时会将所有组件名称整理为驼峰格式，但你可以向组件文件所在目录或其上级目录中添加 .prettierrc 文件并输入以下内容将组将名称偏好修改为 kebab 格式：

{
    "qingkuai": {
        "componentTagFormatPreference": "kebab"
    }
}

在github上编辑此页面