vue js modal에서 부모 컴포넌트 접근하기

최근 작업을 하다보니 팝업을 띄워서 작업하는 부분을 구현해야 할 일이 있었는데, 그때 부모 컴포넌트의 데이터를 가져올 때 생겼던 이슈에 대해서 정리해보려고 한다.

UI

대략 내가 구현했던 화면은 위 그림과 같았고, popup에서 특정 action시 mainview의 데이터를 수정해줘야 하는 기능이 필요했고, 코드는 대략 다음과 같은 구성이였다.

 

//생략
<div id="viewPoint">
    <ipnut v-model="test">
    <buttion @click="logData">button</button>
</div>
 
<template id="test-modal">
    <div>
        <buttion @click="action">action</button>
    </div>
</template>
 
<script>
        ((doc) => {
        var vue = new Vue ({
            el: '#viewport',
            data : {
                test : 1,
            },
            methods : {
                start: function() {
                   console.log(this.test);
                },
                logData: function() {
                    console.log(this.test);
                }
            },
            mounted : function() {
                this.$nextTick(() => {
                    this.start();
                });
            }
        });
    })(document);
    
    //컴포넌트 생성
    Vue.component('test-modal', {
        template: '#test-modal',
        data: () => {
            return {
                parentValue: '',
            }
        },
        methods: {
            action: function() { //클릭시 부모의 값 변경
                this.$parent.test = 2; // 기존 값 1에서 2로변경됨.
            }
        },
        mounted: function() {
            //$parent를 이용해 부모컴포넌트의 값에 접근한 뒤 자식컴포넌트의 parentValue에 할당
            this.parentValue = this.$parent.test; 
        }
    });
</script>
 
 

코드는 대략적으로 이런식으로 작성했다라는 것을 보여주기위한 의사코드에 가깝고, 중요한건 $parent를 이용해 부모 컴포넌트에 접근했다는 점이다. 코드 내용대로 $parent는 상위 컴포넌트을 가르키는 것이고 간단한 내용이라 디테일한 설명은 필요가 없을 것 같다.

(※ 추가적으로 vue를 사용하면서 log로 this를 찍어보면 여러가지를 확인할 수 있다.)

 

vue js 공식문서에서는 prop을 이용하여 데이터를 주고받는 것 보다 뒤떨어지는 대안으로 사용할 수 있다고 설명하고 있다. (이유는 디버깅과 코드가독성을 크게 떨어트린다고 한다.)

 

다음에는 prop을 이용하여 데이터를 주고받는 방법을 찾아봐야겠다.