传递特征属性
在 ofa.js 中,特征属性(Attribute)是组件间传递数据最常用的方式之一。只需在组件的 attrs 对象中声明所需属性,即可在使用组件时将外部数据传入组件内部。
基本用法
定义接收属性
在使用组件之前,需要先在组件的 attrs 对象中声明需要接收的属性。属性可以设置默认值。
First: {{first}}
Full Name: {{fullName}}
重要规则
-
类型限制:传递的 attribute 值必须是字符串,其他类型会被自动转换为字符串。
-
命名转换:由于 HTML 属性不区分大小写,传递包含大写字母的属性时,需要使用
-分割命名(kebab-case 格式)。- 例如:
fullName→full-name
- 例如:
-
必须定义:如果组件未在
attrs对象中定义对应属性,则无法接收该 attribute。设置的值为默认值,如果不想要默认值则设置为null。
User Name: {{userName}}
Age: {{age}}
模板语法传递 Attribute
在组件的模板中,可以使用 attr:toKey="fromKey" 语法,将当前组件的 fromKey 数据传递到子组件的 toKey 属性上。
👇
Full Name: {{fullName}}
多层级传递
可以通过多层嵌套组件逐层传递 attribute。
如果组件需要依赖其他组件,需要在组件中引入其他组件的模块。
外层组件接收: {{userName}}
内层组件接收: {{userName}}