---
# System prepended metadata

title: Inline Components
tags: [Components]

---

# Inline Components

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
One of Qwik's super powers lies in its lazy-loading features.

Qwik lazy-loads:

-   **Independent of hierarchy**: Components can be loaded out of order. For example, the code for a child component can load before its parent code.
-   **Based on interaction**: Code loading is deferred until a user interacts with a component.
-   **More than just components**: Qwik lazy-loads any closure including components, event listeners, effects, and behaviors.

`$` marks a closure as lazy-loadable. For example [`component$()`](https://qwik.builder.io/docs/components/overview/#component) method makes the component lazy-loadable. When you see a `$` in Qwik code, you're crossing a lazy-loading boundary and have to be aware of special rules:

-   any lexically scoped variables must be declared as `const`
-   a captured variable/symbol must be either:
    -   serializable
    -   importable (Either from a different file as `import` or from this file using `export`)

If you want to ensure a component loads with another component, you create an inline component. Inline components load as a part of the parent component and are equivalent to how most other frameworks deal with components.

In this example, the `<App>` and a `<Greeter>` components are prepared for you. The `<Greeter />` component is declared using the [`component$()`](https://qwik.builder.io/docs/components/overview/#component) method and is a Qwik component. Remove the [`component$()`](https://qwik.builder.io/docs/components/overview/#component) to convert `<Greeter>` to an inline component.

Open the `Symbols` tab and notice that the `<Greeter />` component is no longer an independent export, but instead is bundled as part of the `<App>` component.

::: 


###### tags: `Components`