Vue.js > 컴포넌트 명명 > 대소문자 사용법

컴포넌트 정의 시:

import Dropdown from '@/Shared/Dropdown.vue'

export default {
  components: {
    Dropdown, // PascalCase로 정의
  }
}

 

템플릿에서 사용 시:

<dropdown> <!-- kebab-case 또는 소문자로 사용 가능 -->
<Dropdown> <!-- PascalCase로도 사용 가능 -->

 

Vue 컴포넌트 명명 규칙:

컴포넌트 정의 시:
- PascalCase 사용을 권장 (예: Dropdown, MainMenu)

템플릿에서 사용 시:
- kebab-case 사용을 권장 (예: <drop-down>, <main-menu>)
- 하지만 소문자로도 사용 가능 (<dropdown>)
- PascalCase도 가능 (<Dropdown>)

 

주어진 코드에서 소문자 dropdown을 사용한 이유는:

• HTML이 대소문자를 구분하지 않는 특성을 반영
• kebab-case나 소문자 사용이 HTML 표준과 더 잘 어울림
• 일관성 있는 코딩 스타일을 유지하기 위함

따라서 <Dropdown>과 <dropdown>은 동일한 컴포넌트를 참조하며, 작동 방식에는 차이는 없다. 

이는 Vue의 템플릿 파서가 자동으로 이를 처리해주기 때문.