Vue.js
전역 컴포넌트는 플러그인, 라이브러리 형태로 전역으로 사용해야하는 컴포넌트만 사용한다. 일반적으로는 지역 컴포넌트의 components 사용.
실 서비스에서는 보통 하나의 인스턴스를 선언하고 그 아래 다른 컴포넌츠들로 구성되는 식이다.
상하관계 컴포넌트 통신 방식
<body>
<div id="app">
<span>{{ num }}</span>
<app-content v-on:add ="Increase"></app-content> [1]
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
<script>
var appContent = {
template: '<button v-on:click="addNumber">ADD</button>', [2]
methods: {
addNumber: function(){
this.$emit('add'); [3]
}
}
}
var vm = new Vue({
el: '#app',
components: {
'app-content' : appContent
},
methods:{
Increase: function(){
this.num++;
}
},
data: {
num: 10
}
})
</script>[1] : 하위 컴포넌트에서 add라는 이벤트가 발생하면, 상위 컴포넌트에서 Increase라는 이벤트가 실행된다.
[2] : 인스턴스 vm이 복잡해 질까봐 변수를 선언해 분리했다. 버튼을 클릭하면 addNumber라는 함수가 실행된다.
[3] : add라는 이벤트를 발생시킨다.
같은 레벨인 컴포넌트간 통신 방식
보내고자 하는 데이터를 컴포넌트에서 Root로 event emit한 뒤 Root에서 목적지 컴포넌트로 props로 보낸다.
You're not a computer, you're a tiny stone in a beautiful mosaic