부모-자식 간에 데이터 전달 Props

컴포넌트들 간에 데이터를 주고받을 수 있는 방법에 대해 알아보겠습니다.

<template>
<div class="blue lighten-3 pa-3">
    <h1>User 컴포넌트</h1>
    <p>이름: {{ name }}</p> // {{ name }} 을 data() {} 에서 가져온다.
    <v-btn @click="changeName()">이름 변경</v-btn> // v-btn은 vuetify 문법, @click 시 methods의 changeName() 호출
    <hr>
    <v-layout row wrap>
        <v-flex xs12 sm6>
            <UserDetail></UserDetail>
        </v-flex>
        <v-flex xs12 sm6>
            <UserDetail></UserDetail>
        </v-flex>
    </v-layout>
</div>
</template>

<script>
import UserDetail from './UserDetail.vue'; // .vue 생략가능
import UserEdit from './UserEdit.vue'; // .vue 생략가능

export default {
    components: {
        UserDetail, //
        UserEdit,
    },
    data() {
        return {
            name: '뷰제이에스',
        }
    },
    methods: {
        changeName(){ // changeName = function () {} 과 같다.
            this.name = "Hoza"
        }
    }
}
</script>

부모(User.vue)가 가지고 있는 정보를 {{ name }} 을 자식(UserDetail.vue, UserEdit.vue)에게 전달해주는 것을 Props

부모 컴포넌트에서 자식 컴포넌트로 어떤 정보를 넘겨줄 때 사용합니다.

 

Props

부모(User.vue)에게서 전달하고자 하는 값을

<UserDetail :nameOfChild="name"></UserDetail>

왼쪽에서 자식에게 선언되는 Props 의 변수명이 선언되고,

그 변수에 어떤 값을 넣어줄거냐? 라는 값이 오른쪽에 적히게 된다.

 

부모 컴포넌트가 값을 줬으면 자식(UserDetail.vue) 컴포넌트에서는 값을 받겠다는 Props를 작성해줘야한다.

// UserDetail.vue


<template>
  <div class="red lighten-3 pa-3">
    <h3>자세한 회원 정보를 확인합니다.</h3>
    <p>{{ nameOfChild }}</p> // 부모에게서 받은 값을 출력
  </div>
</template>

<script>
export default {
  props: ['nameOfChild'], // array 형태, 부모컴포넌트에서 만들어준 변수명 선언
  data() {
    return {
    }
  }
}
</script>

 

이름: 뷰제이에스 아래의 이름변경을 누르면 자세한 회원 정보를 확인합니다 아래의 뷰제이에스가 Hoza로 변경된다.

그럼 수정할 수 있습니다의 뷰제이에스도 같이 바꾸려면 어떻게해야할까?

 

간단하다 User.vue 에서 <UserEdit :nameOfChild="name"> 을 추가해주고,

UserEdit.vue 에서 props : ['nameOfChild'] 를 추가한 뒤 출력하고 싶은 곳에서 {{ nameOfChild }} 해주면 된다.