Vue - Component 간의 Method 호출 방법

우선 Vue는 Component 를 많이 사용한다.

 

아주 기본적일 수 있지만 우선 Component 간의 통신에 대해서 간단하게 설명한다.

 

먼저 처음에 개념을 잘못 잡고 갈 수 있는 부분이 있어서 간단하게 설명한다.

 

[ 예시 ]

 

화면 예시

화면에 UI가 저렇게 구현되어 있다고 하자.

 

저기서 헤더는 Component로 구현했다면 코드는 이렇게 구성된다.

 

// page.vue


<template>
    <div>
    	<the-header></the-header>
        페이지
    </div>
</template>
   


import TheHeader "@/component/Header.vue"

export default{
    component : {
    	"the-header" : TheHeader,
    },
    
    method:{
    	callPageMethod(){
        	console.log("저는 페이지 메소드 입니다.")
        }
    }
}



// TheHeader.vue
<template>
    <div>
    	헤더
    </div>
</template>



export default{  
    method:{
    	callHeaderMethod(){
        	console.log("저는 헤더메소드 입니다.")
        }
    }
}

 

 

위와 같은 코드 구조일때, page.vue는 parent, TheHeader.vue는 Child가 된다.

 

자 그럼 parent와 chlid의 기준을 알았으니 서로 어떻게 소통하는지 확인해 보자.

 

먼저 chlid 에서 parent를 호출하는 것은 너무나도 쉽다.

 

[ child -> parent Method 호출 방법 ] 

// TheHeader.vue
<template>
    <div>
    	헤더
    </div>
</template>



export default{
    mounted(){
    	this.$parent.callPageMethod();
    },
    method:{
    	callHeaderMethod(){
        	console.log("저는 헤더메소드 입니다.")
        }
    }
}

child가 this.$parent.method() 형태로 호출하면 callPageMethod가 호출된다.

 

[ parent-> child Method 호출 방법 ] 

 

// page.vue

<template>
    <div>
    	<the-header refs="header"></the-header>
        페이지
    </div>
</template>

import TheHeader "@/component/Header.vue"

export default{
    component : {
    	"the-header" : TheHeader,
    },
    monunted(){
    	this.$refs.header.callHeaderMethod();
    },
    method:{
    	callPageMethod(){
        	console.log("저는 페이지 메소드 입니다.")
        }
    }
}

child compoent 에 refs 를 선언해주고, this.$refs.refsName.method() 형태로 호출하면 된다.

 

어떤글에는 refs를 사용하는 것을 권하지 않고, prop과 emit을 이용해서 데이터를 주고 받으라고 하지만 refs 를 권하지 않는 이유에 대해서 명확하게 설명하고 있지 않다. 

 

refs 써도됩니다 여러분.