[vue.js] 본격 생존코딩! 밥벌이를 해보자! (4) 컴포넌트

vue component

재사용가능한 코드 조각

SPA 프레임워크로 웹을 개발하게 되면 많은 컴포넌트들이 모여서 하나의 페이지를 만들게 되며 컴포넌트가 개발의 중심이 된다.

 

data는 속성이 아니라 function이여야 한다.

* 컴포넌트 이름은 소문자와 하이픈(-)로 이루어 지는것이 좋다(W3C규칙을 적용하지는 않지만 따르는것이 좋다)

// 컴포넌트 선언
Vue.component('컴포넌트이름', { // 옵션 })

//커스텀 엘리먼트로 사용할 수 있다.
<컴포넌트이름></컴포넌트이름>

 

# 컴포넌트 전역등록 예제

Vue 루트 인스턴스 없이 component만 선언할수는 없을까-해서 해봤는데 안된다. vue프로젝트에서 반드시 하나의 Vue루트 인스턴스가 필요한건가..

 

# 컴포넌트 지역등록

모든 컴포넌트를 전역으로 등록할 필요는 없다. components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다.

 

//예제가 잘 이해 안가는데.. 아마 Child라는 컴포넌트를 객체로 선언하고.. example이라는 루트컴포넌트 하위로 my-component라는 엘리먼트이름으로 등록한다는것 같다.. 그런데 기억할것은 my-component라는 엘리먼트는 example밑에서만 쓸수 있다는거지. 왜냐 지역등록을 했으니까.

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

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

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

 

이해가 잘 안되는 내용은 노트에 차근차근 정리해보면 이해가 간다.

props로 자식컴포넌트에 데이터를 넘기는방법은 세가지만 기억하면 된다.

1) 부모컴포넌트에 데이터 선언

2) :data ="data"로 자식element에 prop형태로 작성하기

3) 자식컴포넌트 option의 props객체내에서 부모element가 지정한 이름으로 받기. type, require 등등

4) 자식element에서 사용하기