Component

(1) Global Component

Global component 는 해당 컴포넌트 명을 어디서든지 사용할 수 있다는 특징을 갖는다.

<div id="app">
  <my-gmp></my-gmp>
  <hr>
  <my-gmp></my-gmp>
</div>

var data={
  animal: 'dog'
}
Vue.component('my-gmp', {
    data: function(){
        return data;
    },
    template: '<p>Animal Type:  <button @click = "changeAnimal">Change</button></p>',
    methods: {
        changeAnimal : function(){
            this.animal = 'cat';
        }
    }
});

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

POINT

template 안에는 HTML 문법이 사용되었다.
Global component를 형성하기 위해 Vue.component(‘태그 이름’, ‘옵션’) 을 사용한다.
Global component 안에서 data는 함수 형식, 구체적으로는 객체를 return 해주는 함수가 되어야 한다.

(2) Local Component

Local Component는 특정 부분에서만 사용 가능한 컴포넌트이다.

<div id="app2">
  <my-lmp></my-lmp>
  <hr>
  <my-lmp></my-lmp>
<div>

var cmp = {
    data: function(){
        return{
            animal: 'dog'
        }
    },
    template: '<p>Animal Type:  <button @click = "changeAnimal">Change</button></p>',
    methods: {
        changeAnimal: function(){
            this.animal : 'elephant';
        }
    } 
};

new Vue({
    el: '#app2',
    components : {
        'my-cmp' : cmp
    }
})

POINT

Local component는 인스턴스 옵션에 ‘components’를 추가하여 그 안에 ‘사용할 태그 이름’과 ‘지역 컴포넌트 변수’를 매치해줘야한다.