Component란?
인스턴스이며 레이아웃인 Vue의 강력한 기능 중 하나.
특징
인스턴스이기 때문에 모든 옵션 객체를 사용할 수 있다. 그리고 라이프사이클을 사용할 수 있다.
전역 컴포넌트
저번 포스팅인 인스턴스에서 new Vue를 통해 새 Vue 인스턴스를 만들 수 있었다. 전역 컴포넌트의 등록 방법은
Vue.component('컴포넌트 명',{ // 옵션들 })이렇게 등록이 가능하다. 그 외에도 컴포넌트 .vue 파일을 생성해서 만든 후에 옵션 부분에 등록을 할 수 있다.
<template>
<v-main app>
<router-view></router-view>
</v-main>
</template>
<script>
export default {
name: 'DefaultBody',
};
</script>
<style scoped>
</style>컴포넌트 생성 후
Vue.component('컴포넌트 명', import한 컴포넌트)후에 태그 명을 컴포넌트 명으로 해서 사용하면 된다. 이렇게 전역 등록을 하게 되면 어느 인스턴스에서 사용이 가능한
상태가 된다.
지역 컴포넌트
모든 컴포넌트를 전역으로 할 필요는 없다. 컴포넌트를 components 인스턴스 옵션으로 등록해서 인스턴스/컴포넌트
범위에서만 사용할 수 있는 컴포넌트를 생성할 수 있다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<my-component2></my-component2>
</div>
</body>
<!-- 컴포넌트 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var Child={
template:'<div>지역등록 컴포넌트</div>'
}
new Vue({
el:"#app",
components:{
'my-component2' :Child
}
})
</script>
</html>
차이점
이렇게 선언하고 사용하는 것을 보면 이런 생각이 들 수 있다. '그냥 선언 방식만 다르고 둘이 같은건 아닐까?'
그런 당신을 위해 예제를 보여주겠다.
먼저 전역, 지역에 쓰일 컴포넌트를 생성해준다.
Global 전역
Local 지역
등록
등록 후
이렇게 나오는 것을 볼 수 있다.
이제 다른 페이지에서 똑같이 저 태그를 사용해서 해보도록 하겠다.
global은 아무 문제 없는데 Local부터 인식을 못해서 노란줄이 쳐진 것을 볼 수 있다.
실제로 페이지를 실행 시켜서 보면 이렇게 나오는 것을 볼 수 있다.
전역만 나온 것을 볼 수 있다.
이처럼 차이점은 둘의 범위에 있다. 전역 컴포넌트는 Vue.component('컴포넌트명', {옵션들})을 해주면 다른 페이지에서
사용할 수 있다. 하지만 지역 컴포넌트는 선언을 하지 않으면 다른 페이지에서 사용을 할 수 없다.
데이터 전달
컴포넌트는 부모-자식 관계로 사용을 한다. 위에서 보면 컴포넌트들은 다른 컴포넌트에 선언되어 사용이 되는 것을 볼
수 있다. 이처럼 전역/지역 컴포넌트가 선언 된 컴포넌트는 부모가 되는 것이고 선언당한? 컴포넌트들은 자식 컴포넌트
가 되는 것이다.
실제로 컴포넌트의 구조를 보면 트리구조로 되있다. 다른 블로그를 가면 나와 있듯이 동일 한 사진이 나오는데
전체 틀이 레벨0의 루트 즉 부모가 되는 것이고 저 안에 들어가 있는 컴포넌트들이 저렇게 나뉘게 되는 것이다.
컴포넌트 간 데이터의 이동은 간단하지가 않다. 그리고 같은 레벨의 컴포넌트끼리는 데이터의 이동이 불가능 하다.
데이터의 이동에는 2가지가 있는데 하나는 부모 컴포넌트에서 자식 컴포넌트로의 데이터의 이동이고 나머지 하나는
데이터의 이동이라기보다 데이터의 이동했다는 신호를 보내는 것으로 자식 컴포넌트에서 부모 컴포넌트의 이벤트
수신이 있다.
부모 -> 자식
props라는 옵션에 담가서 보낸다. 이것은 예제를 보는 것이 빠르다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<child message="안녕하세요!"></child>
</div>
</body>
<!-- 컴포넌트 간 데이터 전달(상->하) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child',{
props : ['message'],
template: '<span>{{message}}</span>'
})
new Vue({
el:"#app",
components:{
}
})
</script>
</html>저렇게 props를 지정해주고 부모에서 message props에 값을 넣어주면 자식이 받을 수 있다.
자식 -> 부모
자식 에서 부모로의 데이터의 흐름은 간단하지가 않다. 자식에서 이벤트를 일으켜서 부모가 어떤 행위를 해서 데이터를
얻는 방식이기 때문에 자식 컴포넌트 부분에서는 복잡해지게 된다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<p>{{total}}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>
<!-- 컴포넌트 데이터 전달 (하->상) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('button-counter',{
template: '<button v-on:click="incrementCounter">{{counter}}</button>',
data:function(){
return {
counter:0
}
},
methods:{
incrementCounter:function(){
this.counter += 1
this.$emit('increment') // increment에다가 '나 이런 메소드 실행했어요.'라고 알려주는 이벤트를 보낸다.
}
}
})
new Vue({
el:"#app",
data : {
total:0
},
methods:{
incrementTotal:function(){
this.total += 1
}
}
})
</script>
</html>
Comment