안녕하세요~ Vue.js에서 컴포넌트 레벨 통신 방법에 대해 알아보겠습니다.
Vue.js에서는 부모-자식 컴포넌트 간의 데이터 흐름을 관리하기 위해 props와 emit을 사용합니다.
Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법이고, emit은 자식 컴포넌트가 부모 컴포넌트에 이벤트를 발생시키는 방법입니다. 또한, Vue.js에서는 상위 컴포넌트에 접근하기 위해 $parent, 하위 컴포넌트에 접근하기 위해 $children을 사용할 수 있습니다. 이러한 방법들을 적절히 사용하여 Vue.js에서 컴포넌트 간의 통신을 효율적으로 관리할 수 있습니다.
1. 예제소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>같은 컴포넌트 레벨 통신방법 방법</title>
</head>
<body>
<div id="app">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:pass="deliverNum"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/**
* 1뎁스 : root (id=app)
* 2뎁스 : app-header, app-content
*
* 버튼을 클릭하면 app-content 에서 app-content 으로 num 데이터 보내기.
* app-header에서 app-content로 데이터를 보내려면 root에 클릭이번트를 실행 후
* props를 사용해서 받는다.
*/
var appHeader = {
template: '<div>header</div>',
props: ['propsdata']
}
var appContent = {
template: '<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function() {
this.$emit('pass', 10, 20); // 같은 레벨에 데이터를 넣으려면 root에 event를 발생시킨다.
}
}
}
new Vue({
el:'#app',
components: {
'app-header' : appHeader,
'app-content' : appContent
},
data: {
num : 0
},
methods: {
deliverNum: function(value, value2) { // num받기(여러개 받는것도 가능)
console.log(value)
console.log(value2)
this.num = value;
}
}
});
</script>
</body>
</html>
2. 설명
위 코드는 같은 컴포넌트 레벨에서 데이터를 주고 받는 방법을 보여주는 예제입니다.
버튼을 클릭하면 app-content에서 app-content로 데이터를 보내는 방법을 보여주며, app-header에서 app-content로 데이터를 보내려면 root에 클릭 이벤트를 실행 후 props를 사용해서 받는 방법을 보여줍니다. 이러한 방법을 통해 컴포넌트 간의 유기적인 상호작용이 가능해집니다. Vue.js를 이용하면 컴포넌트 간의 상호작용을 더욱 편리하게 구현할 수 있습니다. Vue.js를 공부하면서 컴포넌트 간 통신 방법을 꼭 익혀두시길 권장합니다.
감사합니다.
https://www.inflearn.com/course/age-of-vuejs/dashboard
Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., [사진] Vue.js 시작하기,Ag
www.inflearn.com
'개발 > vue.js' 카테고리의 다른 글
| vue.js 템플릿 문법 바인딩, v-if, v-show (1) | 2023.10.21 |
|---|---|
| vue.js router 페이지 이동 사용 방법 (0) | 2023.10.14 |
| vue.js instance 와 event-emit 이해하기 (0) | 2023.10.12 |
| vue.js component(컴포넌트)와 props 무엇인가? (0) | 2023.10.11 |
| vue.js 시작하기 (1) | 2023.10.09 |
