커스텀 기본값
커스텀 기본값 (Custom Defaults)
출처: 문서
본문
컴포넌트 라이브러리는 컴포넌트 props의 기본값을 직접 커스터마이즈할 수 있게 해 줘요. 기본값을 미리 구성해 두면 반복되는 prop 선언을 줄이고, 템플릿을 더 깔끔하고 일관되게 유지할 수 있어요.
기본 사용법
컴포넌트가 제공하는 정적 setPropsDefaults 메서드를 사용하면 내가 원하는 기본 props를 설정할 수 있어요.
TIP 기본값 커스터마이즈는 선언형(declarative) 컴포넌트에만 적용되며, 반드시 컴포넌트가 초기화되기 전에 실행해야 해요. 구성된 기본값은 전역으로 적용돼요. 한 번 설정하면 해당 컴포넌트가 등록된 모든 Vue 애플리케이션에 적용됩니다. 컴포넌트가 처음 렌더링된 뒤에는 기본값이 불변(immutable)이 되어 더 이상 변경할 수 없어요.
main.ts
import { ElButton } from 'element-plus'
ElButton.setPropsDefaults({
type: 'primary',
size: 'small',
})
커스터마이즈를 적용한 뒤에는 아래 두 가지 사용법이 동일해져요.
App.vue
<el-button> Hello </el-button>
<el-button type="primary" size="small"> Hello </el-button>
WARNING 다른 컴포넌트가 내부적으로 사용하는 컴포넌트에는 기본값을 설정하지 않는 걸 권장해요. 예를 들어:
// This will cause the behavior of the el-autocomplete component to change.
ElInput.setPropsDefaults({ maxlength: 1 })