[vue.js 기초 공부] vue.js - 03

이번에는 vue.js의 컴포넌트에 대해 알아보겠습니다.

 

컴포넌트

html,css,js를 부품으로써 관리 할수 있습니다.

컴포넌트에 이름을 부여하고 언제든지 재사용 가능한 뷰 인스턴스입니다.

 

• 컴포넌트는 간단히 글로벌과 로컬로 나뉘어 사용할수 있습니다.
• 컴포넌트에서는 data를 함수로써 사용합니다.
• 컴포넌트에만 사용할수 있는 특징 prop이 있습니다.

글로벌과 로컬

글로벌컴포넌트

모든 뷰 인스턴스가 사용할수 있는 컴포넌트입니다.

주의점으로 반드시 사용할 뷰 인스턴스를 만들기 전에 작성해주세요 :)

// js
Vue.component("test-component", {
 // option
 template:"<p>test component!!</p>"
})

new Vue({
 el:"#test"
})

// html
<div id="test">
 <test-component></test-component>
</div>

결과 : https://jsfiddle.net/ry92x6mL/

Vue - JSFiddle

여기서 option의 경우 일반 뷰 인스턴스에서 사용할수 있는 옵션은 거의 다 사용가능합니다 :)

 

로컬컴포넌트

변수로써 한번 정의 해놓고 필요한 인스턴스에만 가져다 사용 할수 있습니다.

// js
var localComponent = {
 template:"<p>localComponent!!!</p>"
}

new Vue({
 el:"#test",
 components:{
  "local-component":localComponent
 }
})

// html
<div id="test">
 <local-component></local-component>
</div>

결과 : https://jsfiddle.net/ry92x6mL/1/

Vue - JSFiddle

위의 결과를 보면 알수 있듯이, 컴포넌트를 정의하고 사용할 때는 "components"를 이용하여 사용합니다.

 

data 사용법

data

컴포넌트에서 data를 사용할 경우엔 반드시 함수로써 사용합니다.

 

나쁜예 :(

Vue.component('test-component', {
  data: {
    message: 'testComponent!!!'
  }
})

콘솔창을 보면 에러가 나옵니다. :(

The "data" option should be a function that returns a per-instance value in component definitions.

 

좋은예 :)

Vue.component('test-component', {
  data:function() {
    return {
     count:0
    }
  }
})

위의 방식처럼 함수를 이용하여 data를 사용하면 됩니다 :)

 

props 사용법

Props

모든 컴포넌트 인스턴스는 하위 컴포넌트 템플릿에서 상위 데이터를 직접 참조 할수 없습니다.

하지만 props옵션을 사용하여 하위 컴포넌트로 데이터를 전달 할수 있습니다.

// js
Vue.component('test-component', {
  props: ['data'],
  template: '<span>{{ data }}</span>'
})

new Vue({
 el:"#test",
});

// html
<div id="test">
 <test-component data="props data!!!"></test-component>
</div>

결과 : https://jsfiddle.net/ry92x6mL/3/

Vue - JSFiddle

여기서 중요한 점은 명시적으로 먼저 사용할 props를 선언 해야합니다.

 

 

이번 공부는 여기까지!!