• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@ComponentV2 Decorator: Declaring a Custom Component
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiyujia926-->
5<!--Designer: @s10021109-->
6<!--Tester: @TerryTsao-->
7<!--Adviser: @zhang_yixin13-->
8
9To enable V2 state variable decorator capabilities in custom components, you can use the @ComponentV2 decorator.
10
11\@ComponentV2 is designed to work with state management V2. Before reading this topic, you are advised to read [State Management Overview](./arkts-state-management-overview.md).
12
13>**NOTE**
14>
15> The \@ComponentV2 decorator is supported since API version 12.
16>
17> This decorator can be used in atomic services since API version 12.
18
19
20## Overview
21
22Similar to the [\@Component decorator](arkts-create-custom-components.md#component), the @ComponentV2 decorator is used for custom components.
23
24- In custom components decorated with \@ComponentV2, only new state variable decorators can be used, including [\@Local](arkts-new-local.md), [\@Param](arkts-new-param.md), [\@Once](arkts-new-once.md), [\@Event](arkts-new-event.md), [\@Provider](arkts-new-Provider-and-Consumer.md), and [\@Consumer](arkts-new-Provider-and-Consumer.md).
25- Custom components decorated with \@ComponentV2 do not support existing component capabilities such as [LocalStorage](arkts-localstorage.md).
26- \@ComponentV2 and \@Component cannot be used to decorate the same struct.
27- \@ComponentV2 can use an optional parameter **freezeWhenInactive** of the **boolean** type to implement [component freezing](arkts-custom-components-freezeV2.md).
28
29- A simple \@ComponentV2 decorated custom component should contain the following parts:
30
31    ```ts
32    @ComponentV2 // Decorator
33    struct Index { // Struct-declared data structure
34      build() { // UI defined in build
35      }
36    }
37    ```
38
39Unless otherwise specified, a custom component decorated with \@ComponentV2 maintains the same behavior as a custom component decorated with \@Component.
40
41## Constraints
42
43For details about how to mix \@Component decorated custom components with \@ComponentV2 decorated custom components, see [Mixing Use of Custom Components](./arkts-custom-component-mixed-scenarios.md).
44