🍋 Component란?
component는 기본 HTML element를 확장하여 재사용 할 수 있게 하는 '캡슐화'를 돕는다. Vue component는 Vue instance이기도 하며, 모든 옵션 객체 사용이 가능하다. (루트에만 사용하는 옵션은 제외한다.)
🟡 Component의 전역, 로컬 등록
- 전역 등록
Vue.component('my-component', {
// 옵션
})- 로컬 등록
new Vue({
// ...
components: {
// <my-component> 는 상위 템플릿에서만 사용할 수 있다.
'my-component': Child
}
})위와 같이 컴포넌트가 등록된 이후에는 커스텀 엘리먼트로 사용할 수 있다.
<div id="example">
<my-component></my-component>
</div>🍋 Component간 데이터 전달 : PROPS, EMIT
분리된 상태의 부모, 자식 컴포넌트간에 긴밀히 소통해야할 때가 있는데, 이 때 필요한 것이 component통신, 즉 props와 emit이다.
🟡 PROPS
부모에서 자식으로 데이터를 전달하기 위해 사용
- 사용 예시
<!-- 상위 component template -->
<div id="app3">
<btn-com3 v-bind:msg="m"></btn-com3>
</div>
<script>
<!-- 하위 component -->
Vue.component("btn-com3", {
template: '<button>{{msg}}</button>',
props: ['msg']
})
new Vue({
el: "#app3",
data: {
m: "빙봉빙봉",
n: "zyanzyan"
}
});
</script>🚨 props는 반드시 배열로 받아야 함에 주의한다. 🚨
🟡 EMITS
자식이 부모에게 데이터를 전달하기 위해서 이벤트를 발생시키는 것
- 사용 예시
<div id="app5">
<child-com v-on:event-data1="viewData"></child-com>
<child-com v-on:event-data2="viewData"></child-com>
<child-com v-on:event-data2="viewData2"></child-com>
<span>{{msg}}</span> - {{myname}}
</div>
<script>
Vue.component('child-com', {
template: '<button v-on:click="showLog">데이터 보기</button>',
methods: {
showLog: function() {
//$emit(key, 전송데이터)
//key는 사용자정의 tag의 속성명으로 사용
this.$emit('event-data1', '자식이 부모에게 공유한 데이터');
this.$emit('event-data2', '하하 졸리다 ');
}
}
})
new Vue({
el: "#app5",
data: {
msg: "msg",
myname: "myname"
},
methods: {
//자식이 전송하는 데이터를 받기 위한 parameter선언
viewData: function(v) {
this.msg = v;
},
viewData2: function(v) {
this.myname = this.myname + v;
}
}
})
</script>