# 템플릿 대체

# 인라인 템플릿

Vue 컴포넌트는 일반적으로 컴포넌트 내부에 설정된 템플릿 또는 렌더 함수를 통해 UI를 구현합니다. 하지만 특수한 경우 템플릿을 컴포넌트 내부가 아닌, 외부에서 설정할 수 있습니다. inline-template 속성을 컴포넌트에 설정하면 내부에 갈무리 된 코드를 컴포넌트의 템플릿으로 사용합니다.

<app-component inline-tempalte>
  <div>
    <h3>인라인 템플릿</h3>
    <p>컴포넌트가 감싼 영역의 코드가 템플릿이 됩니다.</p>
  </div>
</app-component>

# 예제

인라인 템플릿 예제 코드를 살펴보세요.

# X-템플릿

또 다른 템플릿 대체 방법은 x-template 입니다. <script> 요소에 type 속성 값을 아래와 같이 설정한 후, 식별 가능한 id 속성을 설정합니다. 그리고 내부에 템플릿 코드를 작성할 수 있습니다.

<script type="text/x-template" id="template-rwd-video">
  <div class="rwd-video">
    <video :src="src" autoplay loop></video>
  </div>
</script>

컴포넌트 template 속성에 X-템플릿 id 이름을 설정하면 컴포넌트 템플릿으로 컴파일 됩니다.

Vue.component('rwd-video', {
  template: '#template-rwd-video',
  props: {
    src: {
      type: String,
      required: true
    }
  }
});

등록된 컴포넌트는 정상적으로 템플릿을 컴파일 합니다. (예제 코드를 살펴보세요.)

<div id="app">
  <rwd-video src="https://goo.gl/BgxF5N" />
</div>

<script type="text/x-template" id="template">
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</script>

<script>
export default {
  name: "HelloWorld",
  template: '#template',
  props: {
    msg: String
  }
};
</script>

# 참고

보다 자세한 내용은 템플릿 대체 문서를 참고하세요.