Vue.js ( Vue ) 에서 부모 자식간 메소드 접근 및 파라미터 전달 방법 간단 정리!

VueJs로 개발하다보면 부모 자식간의 메소드에 접근해서 실행 하는 경우가 많이 생긴다.

여러가지 경우에서 어떻게 접근하거나 실행 해야 하는지 간단히 정리해보겠다.

 

@ 부모가 router-link 사용시 router 내의 자식 메소드 접근 하는 방법

this.$route.matched[0].instances.default.원하는 메소드명();

this.$route.matched[0]this.$route.matched[0].instances.default 까지 보면 현재 열려있는 라우터 화면 객체를 확인할 수 있고 

이를 통해 자식의 메소드를 직접 실행 가능하다.

 

@ 객체 통한 메소드 직접 접근 방법

Root Vue 인스턴스에 this.$root를 통하면 모든 하위 접근 가능

상위 컴포넌트는 this.$children 배열을 통해 하위 컴포넌트에 접근 가능

하위 컴포넌트는 this.$parent를 통해 부모 접근 가능

컴포넌트 속성에 ref='별칭' 를 선언한 후 this.$refs로도 접근 가능

 

 

@자식이 부모 메소드를 실행하거나 값을 보낼때

<부모컴퍼넌트>
	<자식컴퍼넌트 @이벤트명="부모메소드" />
</부모컴퍼넌트>

이렇게 하고 자식에서 원하는 시기에 this.$emit('이벤트명')을 호출하면 됨

 

@자식이 부모 메소드를 실행할때 두번째 방법

<부모컴퍼넌트>
	<자식컴퍼넌트 :속성명="부모메소드명" />
</부모컴퍼넌트>

이렇게 하고 자식에서 원하는 시기에 this.$attrs.속성명()을 호출하면 됨

 

@비부모 자식간의 통신(비추)

var bus = new Vue()
bus.$on('이벤트명', function (id) { // ... })

bus.$emit('이벤트명', 전달하고싶은 파라미터 값);

Vue의 이벤트 버스를 이용하는 방법으로 간편하지만 어디서 실행했는지 연관관계가 모호하므로 비추한다.

 

Vue.js에서 데이터 전달방식의 개념을 간단하게 정리하면 부모 / 자식 관계는

props는 아래로, events는 위로라고 요약할 수 있다.

부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 전달 한다고 생각하면 끝-!