Vue.js 러닝 가이드북

사용

글로벌 컴포넌트

글로벌 등록된 Vue 컴포넌트는 별도의 호출 과정 없이 모든 Vue 컴포넌트에서 바로 사용할 수 있습니다.


 



 


<template>
  <app-header></app-header>
  <main class="container">
    <!-- 콘텐츠 -->
  </main>
  <app-footer></app-footer>
</template>
1
2
3
4
5
6
7

로컬 컴포넌트

로컬 등록된 Vue 컴포넌트는 호출/등록 과정을 거친 후, 템플릿 내부에서 사용할 수 있습니다.



 
 



 



<script>
// 컴포넌트 호출
import AppIframeWrapper from '@/components/AppIframeWrapper';
import AppBaseImg from '@/components/AppBaseImg';

export default {
  // 컴포넌트 등록
  components: { AppIframeWrapper, AppBaseImg }
}
</script>
1
2
3
4
5
6
7
8
9
10



 
 



<template>
  <div class="using-components">
    <!-- 컴포넌트 사용 -->
    <app-iframe-wrapper></app-iframe-wrapper>
    <app-base-img/>
  </div>
</template>
1
2
3
4
5
6
7

NOTE

import 문에 사용된 @ 별칭은 src 디렉토리를 가리키도록 설정되어 있습니다. 별칭을 변경하거나, 별도의 디렉토리를 별칭으로 설정하고자 한다면 vue.config.js 파일에 다음 코드를 작성합니다.

vue.config.js

const path = require('path');
module.exports = {
  // Webpack Chain 설정을 사용해 유지 관리(구성 변경 등) 설정
  chainWebpack: config => {
    const alias = config.resolve.alias;
    // @ 별칭 변경 예: `./src` ⇒ `./client/src`
    alias.set('@', path.resolve(__dirname, 'client/src'));
    // @ 별칭 추가 예: `pages` ⇒ `./src/pages`
    alias.set('pages', path.resolve(__dirname, 'src/pages'));
  }
}
1
2
3
4
5
6
7
8
9
10
11

주의!

컴포넌트를 DOM에서 바로 사용할 때는 W3C 사용자 정의 요소 이름 작성 규칙에 따라 사용자 정의 태그의 이름처럼 쓰는 것을 추천합니다. 이렇게 하면 지금 있거나 앞으로 작성할 HTML 요소와 충돌하는 것을 피할 수 있습니다.

Good

<app-iframe-wrapper></app-iframe-wrapper>
<app-iframe-wrapper/>
1
2

Bad

<AppBaseImg></AppBaseImg>
<AppBaseImg/>
1
2

is 속성

HTML 요소 사용 시 표준 문법에 어긋나거나, 동적으로 컴포넌트를 변경해야 한다면? 특별한 is 속성 을 사용합니다.

표준 준수

HTML 표준 문법에 어긋나는 경우는 다음과 같습니다.

<table>
  <!-- 이 곳에 app-row 컴포넌트를 사용하면 안됩니다. -->
  <app-row></app-row>
</table>
1
2
3
4

이런 경우 is 속성을 사용해 컴포넌트로 사용할 수 있습니다.



 


<table>
  <!-- tr 요소에 is 속성을 사용해 app-row 컴포넌트를 연결해 사용합니다. -->
  <tr is="app-row"></tr>
</table>
1
2
3
4

주의!

아래 나열된 HTML 표준 요소는 표준에 따라 허용된 요소들을 자식요소로 사용할 수 있습니다.

동적 컴포넌트

is 속성을 사용하는 또 다른 예는 이벤트 핸들링에 따라 특정 컴포넌트로 변경해야 하는 경우입니다.









 



<template>
  <div class="tablist">
    <button
      v-for="(button,i) of buttons"
      :key="i"
      @click="currentTab = button.name"
    >{{ button.name }}</button>
    <!-- 동적 컴포넌트 할당 -->
    <component :is="currentComponent"/>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

NOTE

<component>는 동적 컴포넌트 렌더링을 위한 메타 컴포넌트로, 렌더링 될 컴포넌트는 is 속성에 의해 결정됩니다.


아래 탭 메뉴 예제 코드를 통해 is 속성 사용법을 살펴봅시다.

NOTE

탭 컴포넌트의 접근성 향상을 위한 WAI-ARIA 1.1, tabs 예제를 살펴보세요.

← 통신 →