[Vue.js] 데이터 전달 방법1 : props, emit 개념과 활용

Vue 데이터 전달 / props / emit / 바인딩 / 데이터 바인딩 / Vue.js 개념과 활용

 

설명을 위한 기본 세팅은 다음과 같다.

 

Props

부모 > 자식으로 데이터 전달

부모 : v-bind:key="value"
자식 : props:['key']

부모인 Home.vue에서 v-bind를 통해 mySchool 데이터를 넘겨준다.
자식인 HomeChile.vue에서 props 선언을 통해 부모에서 전달한 데이터를 받고, console에 출력한다.

HomeChild.vue 14번째 줄은 mySchool이 정의되어 있지 않아, undefined가 나온다.
부모에서 정의한 변수명만을 이용해야한다.

부모에서 자식으로 넘어온 props 데이터는 변경이 불가하다.

props는 단방향으로 데이터가 전달되기 때문에 데이터 값을 변경할 수 없다.
만약 변경을 원한다면 자식 > 부모 방향으로 데이터를 전달 할 수 있는 emit 함수를 이용해야한다.

부모 > 자식 > 손자 데이터 이동

부모 > 손자에게 데이터를 전달하는 것도 똑같이 해주면 된다.

부모에서 데이터 변경

이동버튼에 대한 함수는 Home.vue에만 정의되어있는데도 바인딩을 통해 자식들에게까지 값 변경이 적용된다.

 

Emit 

자식 > 부모로 데이터 전달

자식 : this.$emit("이벤트", 파라미터)
부모 : @자식이벤트 = "부모메서드"

자식에서  전학가는 메서드를 만들어서 클릭하면 emit 함수를 통해 부모에게 변경된 값을 인자로 전해준다.
부모에서도 전학가는 함수를 인수를 포함해서 작성하고 바인딩되도록 코드를 작성해준다.

부모에서 자식을 선언하는 곳에서도 이벤트에 대한 함수를 정의해주어야한다.

 

emit 사용시 인수도 여러개 사용할 수 있다.

 

Vuex

근데.. 컴포넌트가 여러개면, 모두 props emit 으로 데이터를 전달하기 힘들다.
props, emit보다 더 쉽게 데이터를 전달하는 방법은 Vuex!!

Vuex 에 대한 자세한 설명은 다음 포스팅을 확인하기 바란다 ^0^

 

[Vue.js] 데이터 전달 방법2 : vuex - state, mutations 개념과 활용