컴포넌트 사용하기

전역 등록

전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용

등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트, <my-component></my-component>로 사용할 수 있음 루트 Vue 인스턴스를 인스턴스화하기 전에 컴포넌트가 등록되어 있는지 확인하기

<div id="example">
  <my-component></my-component>
</div>

// 등록
Vue.component('my-component', {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

// 루트 인스턴스 생성
new Vue({
  el: '#example'
})

 

다음과 같이 렌더링 됨

<div id="example">
  <div>사용자 정의 컴포넌트 입니다!</div>
</div>

사용자 정의 컴포넌트 입니다!

 

---

 

지역 등록

모든 컴포넌트를 전역으로 등록 할 필요는 없음

컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수있는 컴포넌트를 만들 수 있음

var Child = {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 는 상위 템플릿에서만 사용할 수 있습니다.
    'my-component': Child
  }
})

동일한 캡슐화는 디렉티브와 같은 다른 등록 가능한 Vue 기능에도 적용됨

 

 

---

 

DOM 템플릿 구문 분석 경고

DOM을 템플릿으로 사용할 때 (예 : el 옵션을 사용하여 기존 콘텐츠가 있는 엘리먼트를 마운트하는 경우), Vue는 템플릿 콘텐츠만 가져올 수 있기 때문에 HTML이 작동하는 방식에 고유한 몇 가지 제한 사항이 적용됨

이는 브라우저가 구문 분석과 정규화한 후에 작동함

가장 중요한 것은<ul>,<ol>,<table>과<select>와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으며, <option>과 같이 특정 다른 엘리먼트 안에만 나타날 수 있음

이러한 제한이 있는 엘리먼트가 있는 사용자 지정 컴포넌트를 사용하면 다음과 같은 문제가 발생할 수 있음

<table>
  <my-row>...</my-row>
</table>

사용자 지정 컴포넌트 <my-row> 는 잘못 된 컨텐츠가 되어, 결과적으로 렌더링시 에러를 발생

해결 방법은 is 특수 속성을 사용하는 것임

<table>
  <tr is="my-row"></tr>
</table>

 

 

다음 소스 중 하나에 포함되는 문자열 템플릿을 사용하는 경우에는 이러한 제한 사항이 적용되지 않음

 

1️⃣ <script type="text/x-template">

2️⃣ JavaScript 인라인 템플릿 문자열

3️⃣ .vue 컴포넌트

따라서 가능한 경우 항상 문자열 템플릿을 사용하는 것이 좋음