컴포넌트에 대해서
465
작성한 질문수 71
안녕하세요. 강의 잘 들었습니다. 1번 듣고 한번 더 들으며서 복습중인데요,
컴포넌트 이해하기 강의에서요,
아래와 같이 컴포넌트를 등록하고,
app.component("BookComponent", BookComponent);
위에서 컴포넌트 사용한다고 했구요
<book-component></book-component>여기서 궁금한 것이 컴포넌트명이 book-comppnent 라고 했는데
위에서는 <book-component> 라고 작성을 하는데 ....규칙이 있는건지요
아님 아래에서 만든 컴포넌트명을 그대로 작성하면 안되는건지요
<BookComponent></BookComponent>
사용할땐 대시를 입력하는 규틱인건지...
답변 1
0
안녕하세요 :)
Naming Rules 참고
PascalCase
kebab-case
camelCase
snake_case
Vue는 PascalCase를 사용하여 등록된 컴포넌트에 대한 kebab-case 태그 해석을 지원합니다.
그리고 Vue3 공식문서에서는 PascalCase를 사용하여 기본 HTML 요소가 아닌 Vue 컴포넌트임을 더 분명하게 할 수 있다고 가이드하고 있습니다. 관련내용 링크
PascalCase, kebeb-case 는 팀마다 네이밍 룰이기 때문에 팀에서 정한 규칙으로 가시면 될 것 같습니다.
또한 수업에서 <book-component>를 kebab-case로 사용한 이유는
싱글 파일 컴포넌트가 아니기 때문에 kebab-case를 사용하였습니다. 관련내용 링크
저의 경우 제가 만든 컴포넌트는 PascalCase 규칙을 따르고 있습니다.
감사합니다.
props로 함수를 전달했을 때의 질문입니다!
0
634
1
eslint 세팅 질문 드립니다.
0
1714
2
컴포넌트 이벤트 전파 관련 질문입니다
0
500
1
app-level의 provide한 값을 새로고침시 정상적으로 inject하지 못함.
1
527
1
this.$refs에 값이 들어가는 시점이 언제인가요?
0
832
1
npm run dev 설치중
0
618
2
reactive vs ref... 굳이 reactive를 사용하는 이유가 뭔가요?
1
1947
1
dummy api axios 호출시 cors 에러
0
534
1
19:17 emit 관련 질문
0
569
1
reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
0
569
1
자식 컴포넌트에 input 태그, checkbox 같은 form 태그가 없으면 v-model 안 쓰는건가요?
0
578
1
template내 자바스크립트 표현식 평가 시점은 언제인가요?
0
346
1
App.vue 물결 표시 제거 방법
0
376
1
v-if 질문입니다!
0
559
1
ref vs reactive vs shallowRef
0
653
1
script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다
1
669
1
이벤트 핸들러로 왜 일반 함수로는 작동이 안 되나요? + console.log도 인식이 안되요
0
344
1
Vue3 Composition API - computed
0
459
1
setup 함수내 문자열 관련 질문입니다.
0
346
2
v-on:click ="" 질문입니다
0
350
1
v-on:click="" 질문입니다
0
235
1
v-for에서 style을 사용하려 할 때
0
374
1
reactive와 computed 차이 질문
0
1110
1
emits사용 이유
1
450
1