特徴属性の受け渡し
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}}
テンプレート構文の属性受け渡し
コンポーネントのテンプレートでは、attr:toKey="fromKey" という構文を使って、現在のコンポーネントの fromKey データを子コンポーネントの toKey プロパティに渡すことができます。
👇
Full Name: {{fullName}}
マルチレベルの伝達
多層ネストされたコンポーネントを通じて、attributeを層ごとに渡すことができます。
コンポーネントが他のコンポーネントに依存する必要がある場合、コンポーネント内で他のコンポーネントのモジュールを導入する必要があります。
外部コンポーネント受信: {{userName}}
内部コンポーネント受信: {{userName}}