밑과 같이 전역 컴포넌트를 만들 수 있다. 메서드 Vue.component를 사용한다.

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

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

new Vue({
  el: '#example'
})

컴포넌트 안의 데이터들은 반드시 함수여야 한다

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

밑과 같이 그냥 데이터 객체를 사용할 수는 없다. 그 이유는 간단하다.

모든 컴포넌트들이 서로 다른 데이터 객체를 사용해야 하기 때문이다.

Vue.component('my-component', {
  template: '<div>{{message}}</div>',
  data: {
      message: 'hello'
  }
})

만약 위와 같이 사용한다면 이것으로부터 나온 모든 컴포넌트는 서로 같은 data 객체를 공유하게 된다. 이는 문제가 될 수 있다! 따라서 데이터 객체를 함수를 사용해서 리턴해주는 것으로 문제를 해결한다.

Vue.component('my-component', {
	template: '<div>{{message}}</div>',
	data: function() {
		return {
			message: 'hello'
		}
	}
})

부모와 자식 컴포넌트

Untitled

일단 부모와 자식 컴포넌트를 독립적으로 만드는 것이 당연히 중요하기 때문에 직접적으로 서로 데이터를 주고받을 수는 없고, 밑의 방식을 사용해서 데이터 통신이 가능하다.

props