1. Component

Create a custom component that accepts a parameter of type Object.

Extended functionality: You can create a xxx.ext.json file. Configuration in xxx.ext.json

Defines the Segment	Type	Required	Description	Minimum version
properties	Object Map	No	The external properties of a component are the mapping table	of property names to property settings
data	Object	No	The internal data of the component, along with properties, is used in the template rendering	of the component
observers	Object	No	Component data field listeners that listen for changes in properties and data	2.0.11
methods	Object	No	The use of component methods, including event response functions and arbitrary custom methods,	about the use of event response functions
behaviors	String Array	No	Code reuse mechanisms between components similar to mixins and traits
created	Function	No	Component Lifecycle Functions - Execute when a component instance has just been created, note that setData	cannot be called at this time
attached	Function	No	Component Lifecycle Function - Executes	when a component instance enters the page node tree
ready	Function	No	Component Lifecycle Function - Performs	after the component layout is complete
detached	Function	No	Component Lifecycle Function - Executes	when a component instance is removed from the page node tree
methods	Object	No	The use of component methods, including event response functions and arbitrary custom methods,	about the use of event response functions
relations	Object	No	For definitions of intercomponential relationships, see Intercomponential Relationships
options	Object Map	No	Some options (specific option settings are involved in the documentation when describing the relevant features, which are not listed here)
externalClasses	String Array	No	The external style class	accepted by the component
lifetimes	Object	No	Component Lifecycle Declaration Object
pageLifetimes	Object	No	For the lifecycle declaration object of the page on which the component resides, see Component Lifecycle	2.0.4

The resulting component instance can be accessed through this in the component's methods, lifecycle functions, and property observers. Components contain some common properties and methods.

Property Name	Type	Description	Minimum version
is	String	The file path of the component is	2.1.5
id	String	Node id	2.1.5
dataset	String	Node dataset	2.1.5
data	Object	Component data, including internal data and property values	2.1.5
properties	Object	Component data, including internal data and property values (consistent with data)	2.1.5
Method Name	Parameter	Description	Minimum version
---	---	---	---
setData	Object newData	Set the data and perform the view layer rendering
triggerEvent	String name, Object detail, Object options	Triggering events, see Intercomponential Communication and Events
createSelectorQuery		Creates a SelectorQuery object that the selector selects within the component instance	1.5.28
createIntersectionObserver		Creates an IntersectionObserver object that the selector selects within the component instance	1.3.7
selectComponent	String selector	Use the selector to select a component instance node to return the first component instance object that matches	1.5.29
selectAllComponents	String selector	Use the selector to select a component instance node, returning an array of all component instance objects that match to	1.5.29
getRelationNodes	String relationKey	To get all the associated nodes corresponding to this relationship, see Intercomponent Relationships	1.5.38
hasBehavior	Object behavior	Checks whether the component has a behavior (when checked recursively checks all behaviors that are introduced directly or indirectly)	2.1.5
getPageId		Returns the page identifier (a string) that can be used to determine whether several custom component instances are	within the same page 2.1.5

Code Sample

note

In the properties definition segment, attribute names are noted in propertyName; In FXML, the value of a property is specified using a hyphen (component-tag-name property-name="attr value" and a camel notation (attr="") when applied to data binding.

2. properties

Defines the Segment	Parameter	Required	Description	Minimum version
type		Yes	The type of the property
value		No	The initial value of the property is
observer	Function	No	The callback function	when the property value changes

Code Sample

The type of the Property can be one of the String Number Boolean Object Arrays, or it can be null for an unrestricted type.
In most cases, it is best to specify an exact type for the property. This way, when you specify a property value literally in FTML, the value can get an exact type, such as:

At this point, since the corresponding properties of the custom component are specified as number types, min and max are assigned values of 1 and 5 instead of "1" and "5", i.e.:

prompt

• Use this.data to get internal data and property values; However, direct modification does not apply the changes to the interface, and should be modified using setData.
• Property names should avoid starting with data, i.e. not in the form of dataXyz, because in FXML, data-xyz="" is treated as a node dataset, not a component property.
• When a component is defined and used, neither the component's property name nor the data field can conflict with each other (although they are in different definition segments).

3. Behavior

Registers a behavior that accepts a parameter of type Object.
​

Parameter Object object

Defines the Segment	Type	Required	Description	Minimum version
properties	Object Map	No	Properties of the same component
data	Object	No	Data	for the same component
methods	Object	No	The same as the custom component's method
behaviors	String Array	No	Introduce other behavior
created	Function	No	Lifecycle function
attached	Function	No	Lifecycle function
ready	Function	No	Lifecycle function
detached	Function	No	Lifecycle function

Code Sample