<p>안녕하세요 오늘 강의 수강중 속성명과 값이름이 동일할때 축약이 가능하다고 언급하셨는데&nbsp;</p>
<pre class="language-html"><code>import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

  components : {
    'todo-header' : TodoHeader,
    'todo-input' : TodoInput,
    'todo-list' : TodoList,
    'todo-footer' : TodoFooter
  }</code></pre>
<p>위와같이 저는 컴포넌트 태그명을 케밥케이스로 작성했는데 해당 태그명을 삭제해도 컴포넌트가 정상적으로 맵핑이 되고있습니다.</p>
<p>컴포넌트 이름과 내용이 동일해야지만 컴포넌트맵핑이 정상적으로 처리가 되야되지 않나요?</p>

<p>안녕하세요 run2070님 좋은 질문이네요! :) 컴포넌트 옵션 속성에 들어가는 아래 값들은 모두 같은 값으로 취급됩니다 :)</p>
<div style="color: #d6deeb; background-color: #011627; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div>components: {</div>
<div><span style="color: #d9f5dd;">'</span><span style="color: #ecc48d;">todo-header</span><span style="color: #d9f5dd;">'</span>: TodoHeader,</div>
<div><span style="color: #d9f5dd;">'</span><span style="color: #ecc48d;">TodoHeader</span><span style="color: #d9f5dd;">'</span>: TodoHeader,</div>
<div>TodoHeader: TodoHeader,</div>
<div>TodoHeader,</div>
<div>},</div>
</div>
<p>수강해 주셔서 감사합니다 :)</p>

인프런 커뮤니티 질문&답변

질문있습니다