#3.vue기초 부모-자식간 데이터 전달 props

패키지 구조

*부모(user.vue)에서 자식(userDetail.vue)로 데이터 전달하기.

 

1. App.vue

<template>
  <v-app>
    <v-content>
      <User/> <!--User.vue:부모 UserDetail/UserEdit.vue:자식 -->
    </v-content>
  </v-app>
</template>

<script>
import User from "./components/User"

export default {
  name: "App",
  components: {
    User
  }
}
</script>

2. User.vue - 부모 컨포넌트

<template>
  <div class="blue lighten-3 pa-3">
    <h1>User Info</h1>
    <p>User Name is {{name}}</p>
    <button @click="nameChange">Name Change</button>
    <hr>
    <v-layout row wrap>
      <v-flex xs12 sm6>
        <UserDetail :ChildrenofUser="name"></UserDetail> <!--ChildrenofUser라는 이름으로 User.vue의 데이터인 name을 UserDetail에 전달함. -->
      </v-flex>
      <v-flex xs12 sm6>
        <UserEdit></UserEdit>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import UserDetail from "./UserDetail.vue"
import UserEdit from "./UserEdit.vue"

export default {
  components: {
    UserDetail,
    UserEdit
  },
 data: () => ({
      name: 'Sky'
  }),
  methods:{
    nameChange(){ //이름 변경하기
      this.name ='Sally'
    }
  }
}
</script>

3. UserDetail.vue -자식 컨포넌트

<template>
  <div class="red lighten-3 pa-3">
    <h3>More user Info</h3>
    <p>User Name</p>
    <p>{{ChildrenofUser}}</p> <!--부모에서 이 데이터를 수정하면 여기도 같이 수정됨 -->
  </div>
</template>
<script>


export default {
 props:['ChildrenofUser'], //props를 받을떄는 array형태로.
 data: () => ({
      ChildrenofUser: null
  })
}
</script>

Name Cange 버튼을 클릭한 후 부모와 자식 컨포넌트의 이름이 함께 변경됨.