[Vue.js] 같은 레벨 컴포넌트의 통신
2021. 9. 20. 22:19ㆍ개발공부/Vue.js 시작하기
728x90
같은 레벨 컴포넌트의 통신
컴포넌트는 재사용이 쉽게 객체를 모듈화해서 사용할 수 있는 Vue의 기능이며 상위 컴포넌트, 하위 컴포넌트로 관계성을 지닙니다. 이 둘의 통신은 상위->하위일 땐 props 방식, 하위->상위은 event emit 방식을 사용해 가능합니다.
그렇지만 같은 레벨 하위->하위의 경우엔 통신은 직접 이루어지지 않고 상위 컴포넌트를 통해 통신합니다.
<body>
<div id="app">
<app-header v-bind:propdata="num"></app-header>
<app-content v-on:pass="passNum"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<div>header</div>',
props: ['propdata']
}
var appContent = {
template: '<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function() {
this.$emit('pass', value);
}
}
}
var value = 10;
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
methods: {
passNum: function(value) {
this.num = value;
}
},
data: {
num: 0
}
});
</script>
</body>참고자료:
'개발공부 > Vue.js 시작하기' 카테고리의 다른 글
| [Vue.js] axios (비동기식 처리) (0) | 2021.09.23 |
|---|---|
| [Vue.js] Router (0) | 2021.09.20 |
| [Vue.js] 컴포넌트 통신 (0) | 2021.09.20 |
| [Vue.js] Component (0) | 2021.09.20 |
| [Vue.js] Vue 인스턴스와 생성자 함수 (0) | 2021.09.18 |