Basics
In Qingkuai, components are the basic units for building user interfaces. Each component represents an independent and reusable UI piece, from a simple button to 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
Qingkuai component definition follows the same file-based model used by Vue and Svelte. Each component is defined in a .qk file. After compilation, the file becomes 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"
}
}