• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

6:05 쯤에 설명해주신부분 질문드려요

19.03.03 10:19 작성 조회수 146

0

6:05초 쯤에 설명해주신 title을 가져오는 동작? 순서가 잘이해가 안됩니다 ㅠ

created() {

this.inputTitle = this.data.title

}

위에 내용에서 this.data.title은 props: ['data']를 통해 가져온 부모컴포넌트의 data 전체를 의미하는건가요??

Board.vue에 써있는

data() {

return {

bid: 0,

loading: false,

cDragger: null,

isEditTitle: false,

inputTitle: ''

}

}

이내용을 하위 컴포넌트인 List.vue가 props: ['data'] 를 함으로써 상속받게되면 상위컴포넌트의

data(){ return {....} } 안에 쓰인 모든 값을 전부 가져올 수 있게되는건가요??

그렇다고해도 Board.vue에 data()안에는 title이라는 이름의 값은 없는데 어떻게

this.inputTitle = this.data.title 가 가능한지 잘모르겠습니다

답변 1

답변을 작성해보세요.

0

부모데이터를 전부 가져오는 것도, 상속도 아닙니다.

Board.vue에서 List를 사용한 코드를 볼가요?

<div class="list-wrapper" v-for="list in board.lists" :key="list.pos">

<List :data="list" />

</div>

Board.vue의 boards 데이터를 v-for로 순회하면서 얻은 데이터 list가 List 컴포넌트의 data 프로퍼티로 들어가는 겁니다.

boards 데이터는 스토어의 boards 값이구요.

computed 속성에 추가해 두었죠.

  computed: {

...mapState({

board: 'board',

isShowBoardSettings: 'isShowBoardSettings'

})

},

따라서 List 컴포넌트의 data는 스토어의 boards 배열의 한 요소입니다.