본문 바로가기

Vue.js의 꽃인 컴포넌트에서 DOM을 구성하기 위한 Template을 만들때 주의할 점 몇가지를 포스팅합니다.

is 특성 사용하기

컴포넌트를 등록하고 HTML에서 이것을 사용하려면 보통 아래와 같이 사용합니다.

<div id="app">
  <component-a></component-a>
</div>

하지만 컴포넌트가 기존 HTML테그의 하위로 들어갈 경우 정상적으로 렌더링이 되지 않는 경우가 있는데 이럴때 is특성을 사용하면 정상적으로 렌더링이 됩니다.
아래와 같이 작성할 경우 <select>라는 HTML태그에 컴포넌트가 들어가 있으므로 실제로 렌더링을 하면 <option>이 나오지 않습니다.

<div id="app">
  <select>
    <component-option></component-option>
    <component-option></component-option>
  </select>
</div>

이럴때 아래처럼 컴포넌트를 불러올 때 is특성을 사용하면 정상적으로 나옵니다.

<div id="app">
  <select>
    <option is="component-option"></option>
    <option is="component-option"></option>
  </select>
</div>

컴포넌트의 템플릿 작성시 루트요소는 하나여야 합니다.

컴포넌트 안에 옵션을 작성하는 요소중에 Template가 있습니다.
DOM을 형성할 때 어떻게 나와야 하는지 HTML형태로 작성을 하는데요.
이 떄도 주의해야 할 점이 있습니다.
루트요소는 하나만 작성을 해야 오류가 나지 않습니다.

<template id="testTemplate">
    <div>Test</div>
    <div>Template입니다.</div>
</template>


위와 같이 <template> 안에 루트 요소가 2개 이상이면 오류가 발생합니다.
이럴경우는 아래와 같이 수정해야 합니다.

<template id="testTemplate">
  <div>
    <div>Test</div>
    <div>Template입니다.</div>
  </div>
</template>


위와 같이 <DIV> 하나 감싸서 루트요소를 하나로 만들면 정상적으로 작동합니다.

어쩌다보니여기까지

고급지게 만들어 저렴하게 배포는 공작소

0