다른 컴포넌트의 변수값 호출하기

Vue2 기준으로 다른 컴포넌트에서 사용중인 변수의 값을 가져와서 사용하는 방법입니다.

 

  SPA 형식의 웹을 제작하다보면, 편의상 분리했던 다른 컴포넌트의 js 변수값을 가져오고 싶은 경우가 생깁니다.

예를 들면 A 컴포넌트와 B 컴포넌트가 함께 띄워지는 중인데, B 컴포넌트에서 A 컴포넌트에 선언한 변수 'byunsu'의 값이 3인지 5인지 궁금할 수 있다는거죠. 혹은 B 컴포넌트에서 A 컴포넌트의 변수 'byunsu'의 값을 변경하거나요.

그러나..

생각보다 컴포넌트 간 변수 값 교환이 복잡했습니다. eventbus를 이용해서 변수값을 리턴받으려고 해도 

변수값이 아닌 vue 객체가 리턴이 되고, 아무리 이 객체를 뒤적거려봐도 변수의 값은 없었거든요.

난 네가 필요한게 아니야..

변수 값을 바로 리턴하지 않고 문자열로 변환해서 보내든 어쩌든 결론은 똑같았습니다. 방법을 검색해도 잘 안나오더라고요ㅠㅠ 정말 필요한 로직이었는데..몇 시간 동안 이것저것 시도해 본 결과 찾아낸 방법들을 공유합니다. 

1. 세상 간단한 방법 : 세션 저장소나 로컬 스토리지에 저장

//vue파일 : 변수를 보낼 A컴포넌트
<script>
	window.localStorage.setItem("byunsu",byunsu );
</script>

사용 : window.localStroage.getItem("byunsu")

 

제일 간단한 방법이지만, 사용하지 않을 변수값을 스토리지에 저장하게 되거나 컴포넌트 파괴 후에도 관리되지 않을 값이 남아있어 찝찝한 방법이기도 합니다. 

 

2. 1번을 eventbus 에 응용

1번처럼 localStorage를 사용하긴 하되, 이벤트 버스로 필요한 시점에 부른 뒤 사용하고 삭제하는 방법이에요.

// A컴포넌트.vue
<script>
export default {
    data() {
        return {
        	변수 : 0 // 사용할 변수
        }
    },
    mounted() {
    	//eventBus에서 localStorage에 변수값을 저장하는 로직을 붙여줍니다.
		this.$EventBusForUI.$on("호출코드", ()=>{ 
        	window.localStorage.setItem("변수명",this.변수); 
        });
    },
    destroyed() {
    	//컴포넌트 파괴 시 이벤트 버스에 붙어있는 변수 호출 로직을 삭제합니다.
    	this.$EventBusForUI.$off("호출코드");
    }
}
</script>

 

이 로직을 사용할 B컴포넌트입니다.

// B컴포넌트.vue
<script>
export default {
    methods : {
        변수값을_사용할_메소드(){
            //A컴포넌트가 localStorage에 변수값을 저장하도록 함
            this.$EventBusForUI.$emit("호출코드", 입력파라미터가_있다면_여기에);
            window.localStorage.getItem("변수명")); // 저장해둔 변수의 값을 사용합니다
            ...
            // 사용이 끝난 변수는 localStorage에서 삭제해줍니다.
            window.localStorage.removeItem("변수명"); 
        }
    },
}
</script>

약간 "이렇게까지..?" 싶지만 작동은 합니다.