傳遞特徵屬性
在 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}}