Basics
In qingkuai, components are the basic units for building user interfaces. Each component represents an independent, reusable piece of the UI, which can be a simple button or a complex page. Components are inherently encapsulated and composable, making UI development clearer and more efficient.
The image below shows a component-based representation of a blog page, where each area represents a component. Areas with the same color indicate component reuse:
Definition and Usage
Component definition in qingkuai follows the same pattern as vue and svelte, namely file-based component definition. Each component is defined in a file with the .qk extension. After being processed by the compiler, this file is converted into a JavaScript module with a default export.
Assuming we have defined a component via a Component.qk file, we can import it into another component file using import syntax, and reuse it in the template section by adding a tag with the same name as the import identifier:
<lang-js>
import Component from "./path/to/Component.qk"
</lang-js>
<Component />
<Component />component file to refer to files with the .qk extension.Component names support kebab-case format. The following usages are equivalent:
<MyComponent />
<my-component />By default, when formatting component files, all component names will be transformed into camelCase format. However, you can add a .prettierrc file in the component file's directory or its parent directories and include the following content to change the component name preference to kebab-case:
{
"qingkuai": {
"componentTagFormatPreference": "kebab"
}
}