특징 속성 전달
ofa.js에서 특성 속성(Attribute)은 컴포넌트 간 데이터를 전달하는 가장 일반적인 방법 중 하나입니다. 컴포넌트의 attrs 객체에서 필요한 속성을 선언하기만 하면, 컴포넌트를 사용할 때 외부 데이터를 컴포넌트 내부로 전달할 수 있습니다.
기본 사용법
수신 속성 정의
컴포넌트를 사용하기 전에, 먼저 컴포넌트의 attrs 객체에 받을 속성을 선언해야 합니다. 속성에 기본값을 설정할 수 있습니다.
First: {{first}}
Full Name: {{fullName}}
중요 규칙
-
유형 제한: 전달되는
attribute값은 반드시 문자열이어야 하며, 다른 유형은 자동으로 문자열로 변환됩니다. -
명명 변환: HTML 속성은 대소문자를 구분하지 않으므로, 대문자가 포함된 속성을 전달할 때는
-로 구분된 이름(케밥 케이스 형식)을 사용해야 합니다.- 예:
fullName→full-name
- 예:
-
정의 필수: 컴포넌트가
attrs객체에 해당 속성을 정의하지 않은 경우, 해당 attribute를 받을 수 없습니다. 설정된 값은 기본값이며, 기본값을 원하지 않으면null로 설정합니다.
User Name: {{userName}}
Age: {{age}}
템플릿 문법으로 Attribute 전달하기
컴포넌트 템플릿에서는 attr:toKey="fromKey" 구문을 사용하여 현재 컴포넌트의 fromKey 데이터를 하위 컴포넌트의 toKey 속성으로 전달할 수 있습니다.
👇
Full Name: {{fullName}}
다단계 전달
다중 레이어 중첩 컴포넌트를 통해 속성을 단계적으로 전달할 수 있습니다.
컴포넌트가 다른 컴포넌트에 의존해야 하는 경우, 해당 컴포넌트에서 다른 컴포넌트의 모듈을 가져와야 합니다.
외부 컴포넌트 수신: {{userName}}
내부 컴포넌트 수신: {{userName}}