같은 레벨의 컴포넌트 간 통신

개발새발개발러·2022년 5월 27일
0

Vue.js

목록 보기
1/3
post-thumbnail

Vue에서 동일한 상위 컴포넌트를 둔 같은레벨의 컴포넌트간의 데이터를 직접적으로 전달하는 방법은 없음(vuex와 같은 상태관리 라이브러리 제외)

따라서 같은 레벨의 컴포넌트에 데이터를 전달하기 위해선 상위 컴포넌트에 emit으로 이벤트를 전달하여 전달한 이벤트로 받은 데이터를 전달하고자 하는 같은레벨의 컴포넌트에 props로 전달하는 방식을 사용한다

예제

	<div id="app">
        <app-header v-bind:propsnum="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>
		//데이터 전달받는 컴포넌트
		const appHeader = {
			//3. props로 변경된 num 데이터 출력
            template : '<div>header {{propsnum}}</div>',
            props : ["propsnum"]
        }
		//데이터를 전달하는 컴포넌트
        const appContent = {
            template : '<div>content <button v-on:click="passNum">pass</button> </div>',
            methods : {
				//1. emit으로 부모 컴포넌트에 pass emit으로 파라미터 10을 넘김
                passNum : function() {
                    this.$emit("pass",10)
                }
            }
        }

        new Vue({
            el: '#app',
            components : {
                'app-header' : appHeader,
                'app-content' : appContent
            },
            data : {
                num : 0
            },
            methods:{
                passNum: function(emitNum){
					//2. emit으로 받은 상위 컴포넌트에서 data변경
                    console.log('pass emit param', emitNum)
                    this.num += emitNum
                }
            }
        })

0개의 댓글