Vue 부모자식 컴포넌트 데이터 교환 함수호출

vue를 사용하다 보면 컴포넌트 통신은 필수적으로 일어난다 

그때 사용하면된다

 

-refs, props

부모-> 자식 

1.props

주로  초기 변수 전달을 위해 사용했다

줄 때(부모)

v-bind:변수 이름:변숫값

v-bind->: 줄여서 표현 가능하다

받을 때(자식)

props안에 변수 이름을 쓰고

사용할 때는 this. 변수 이름으로 사용한다

 

2.refs

주로 자식 함수를 호출하기 위해 사용했다

사용법

this.$refs. 태그에 지정한 ref값. 지정 컴포넌트 안에 함수

 

3.emit

자식 -> 부모

1. 자식

this.$emit('명칭', '전달할 변수')

 

2. 부모

v-on:명칭="호출할 함수"

호출할 함수

아주 쉽게 컴포넌트 통신을 할 수 있다