-
[기초]#4 Vue의 컴포넌트란?Vue.js 2020. 6. 3. 19:48반응형
컴포넌트 등록의 방법은 두 가지가 있다. 전역 컴포넌트, 지역 컴포넌트 두 가지로 용도에 따라 사용할 수 있다.
지역(Local) 컴포넌트는 정해진 특정 구역에서만 사용할 수 있는 컴포넌트이고, 전역(Global) 컴포넌트는 모든 인스턴스에서 공통으로 사용할 수 있는 컴포넌트이다.
전역 컴포넌트 등록
Vue.component('컴포넌트 명', { //컴포넌트 속성 });Vue 라이브러리를 로딩하고 나면 Vue라는 전역 변수가 생성된다. 해당 변수에 전역 컴포넌트를 등록 할 수 있다.
모든 Vue 인스턴스에서는 해당 컴포넌트에 접근하여 사용할 수 있다.
<html> <head> <title>Vue Component Registration</title> </head> <body> <div id="app"> <button>컴포넌트 등록</button> <my-component></my-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> Vue.component('my-component', { template: '<div>전역 컴포넌트가 등록되었습니다!</div>' }); new Vue({ el: '#app' }); </script> </body> </html>
등록한 my-component가 등록되었고 template이라는 속성을 가지고 있다. (template는 추후에 설명)
id가 app인 요소에 my-component를 사용하도록 선언하였고 전역에 등록되어있는 my-component의 template이 사용되었다.
크롬 브라우저에서 해당 화면에서 마우스 우클릭 후 소스 보기를 하면 아래와 같습니다.
지역 컴포넌트 등록
new Vue({ components: { '컴포넌트 명': 컴포넌트 내용 } });전역 컴포넌트와 마찬가지로 컴포넌트 명은 HTML에 작성할 사용자 정의 태그를 의미하고 컴포넌트 내용은 해당 컴포넌트의 속성을 정의한다.
전역 컴포넌트와 지역 컴포넌트가 사용방법만 다를 뿐 어떤 차이가 있는지 다른 예제로 확인하자.
이번에는 인스턴스를 2개를 생성했다. app, app2 두 인스턴스 모두 my-global-component, my-local-component를 인스턴스 유효 범위에서 사용하려 하고 있다. 하지만 app에서는 components에서 cmp를 등록하였고 app2에서는 등록하지 않았다. 모두 예상하는 대로 결과는 아래와 같다.
지역 컴포넌트는 인스턴스 속성의 components에 등록하지 않으면 사용할 수 없지만, 전역 컴포넌트는 모든 인스턴스에서 사용할 수 있다.
출처 http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553372
반응형'Vue.js' 카테고리의 다른 글
[Vue] Vue js 비동기통기(axios) 샘플코드 (0) 2022.06.25 [기초]#6 Vue js 기초 문법 (0) 2022.06.11 [기초]#5 Vue의 Router 라우터란? (설치,설정,데이터 IN/OUT) (0) 2022.06.11 [기초]#2 Vue.js가 무엇인가? (0) 2020.06.03 [기초]#1 Vue.js 개발환경 설정하기 (CDN, Mac 환경(vsCode) (0) 2020.06.02