modal 컨포넌츠 등록 문의
앞서 App.vue에선,
import TodoHeader from './components/TodoHeader.vue'하여
components: {
'TodoHeader': TodoHeader,
},이렇게 컴포넌츠를 등록했습니다.
그런데 왜 모달은 TodoInput.vue 파일에서
components: {
popModal: popModal,
},이렇게 작은따옴표('') or 큰따옴표("")를 사용하지 않고 등록하는건가요? (정상작동은 합니다~!)
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
RooRoo님, Vue.js에서 컴포넌트를 등록하는 방식에 대해 질문주셨군요.
우선, import TodoHeader from './components/TodoHeader.vue' 코드로 TodoHeader 컴포넌트를 가져온 후에,
components: {
'TodoHeader': TodoHeader,
},
이렇게 작성하여 컴포넌트를 등록하는 것은 올바른 사용법입니다.
모달 등록과 관련하여,
components: {
popModal: popModal,
},
이렇게 작은따옴표나 큰따옴표 없이 작성하는 것도 정상 작동하는 Vue.js의 문법 중 하나입니다. JavaScript ES6에서는 객체의 속성(property)명과 값을 할당하는 변수명(variable name)이 같을 때 축약하여 작성할 수 있습니다. 즉, {popModal: popModal}는 {popModal}로 축약해서 쓸 수 있기 때문에 큰따옴표(“”)나 작은따옴표(“) 없이 작성해도 Vue는 컴포넌트를 정상적으로 인식하고 등록합니다.
정리하자면, 작은따옴표나 큰따옴표를 사용하는 것은 문자열로 키(key)를 명시하는 것이고, 생략하는 것은 ES6의 속성명 축약을 이용한 것으로 둘 다 올바른 문법입니다. 선택하신 방식이 코드 스타일이나 팀 내 규칙에 맞다면 어떤 방식을 사용하셔도 좋습니다.
더 궁금하신 사항이 있으시면 언제든지 질문해 주세요!
Chrome 개발자 모드 확장이 안됨
0
255
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
279
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
279
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
303
2
addTodo Helper 함수 적용
1
243
1
vuex 헬퍼 전역 설정
1
245
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
223
2
구조 차이에 대한 문의
1
345
2