Passing Feature Attributes
In ofa.js, attributes are one of the most common ways to pass data between components. Simply declare the required attributes in the component's attrs object, and external data can be passed into the component when using it.
Basic Usage
Define Receiving Attributes
Before using a component, you need to declare the properties to be received in the component's attrs object. Properties can have default values.
First: {{first}}
Full Name: {{fullName}}
Important Rules
-
Type Restriction: The passed attribute value must be a string; other types will be automatically converted to strings.
-
Naming Convention: Since HTML attributes are case-insensitive, when passing attributes containing uppercase letters, you need to use a
-separated naming (kebab-case format).- For example:
fullName→full-name
- For example:
-
Must Be Defined: If the component does not define the corresponding attribute in the
attrsobject, it cannot receive that attribute. The set value is the default value; if you do not want a default value, set it tonull.
User Name: {{userName}}
Age: {{age}}
Template Syntax Passing Attributes
In the component's template, you can use the attr:toKey="fromKey" syntax to pass the fromKey data of the current component to the toKey attribute of the child component.
👇
Full Name: {{fullName}}
Multi-level Propagation
Attributes can be passed layer by layer through multi-layer nested components.
If a component needs to depend on other components, it must import the modules of those other components within the component.
Outer component received: {{userName}}
Inner component received: {{userName}}