가상 지식

객체 속성을 서브어셈블리에 전달

서브어셈블리에 전달된 데이터 변경 사항을 상위 어셈블리에 반영

객체 속성을 서브어셈블리에 전달

다음 대상의 데이터를 서브어셈블리에 전달할 때 방법은 크게 2가지 모드입니다!
서브어셈블리로 표시하려면board의boardTitle

"board": {
  "boardTitle": "11/12 TODO",
  "todos": []
}

모드 ① 생략 표기법으로 대상 전달

상위 어셈블리

<board-index v-bind="board"/>

서브어셈블리

<template>
  <div>{{ boardTitle }}</div>
</template>

<script>
export default {
  props: {
    boardTitle: {
      type: String,
      required: true
    },
    todos: {
      type: Array
    }
  }
}
</script>

모드 ② 객체 직접 전달

상위 어셈블리

<board-index :board="board"/>

서브어셈블리

<template>
  <div>{{ board.boardTitle }}</div>
</template>

<script>
export default {
  props: {
    board: {
      type: Object,
      default: () => ({
        boardTitle: '',
        todos: []
      }),
      required: true
    }
  }
}
</script>

대상의 속성을 단독으로 귀속할 수도 있습니다.
장소에 따라 분리해서 사용할 수 있을 것 같습니다.
다소 벗어났지만 모드 ②에서 함수로 board의default를 되돌려줍니다.
이것은
props 기본값에 지정된 대상 또는 그룹 공유 인용
사용자 정의 모양새를 정의합니다.
인용을 공유하면 여러 vue 실례가 같은 대상을 인용하고 같은 대상을 변경합니다.

서브어셈블리에 전달된 데이터 변경 사항을 상위 어셈블리에 반영

props를 통해 데이터를 부모 세대에서 하위 세대로 전달할 때
하위 측에서 그props 데이터를 직접 바꾸고 싶다면 vue에게 욕을 먹을 것이다.
그럼 어떻게 하면 좋을까, 비망록으로 정리하자.

상위 어셈블리

<child-component v-model="parentData"/>

서브어셈블리

<script>
export default {
  props: {
    parentData: {
      type: String,
      default: ''
    }
  },
  computed: {
    inputData: {
      get() {
        return this.parentData
      },
      set(newVal) {
        this.$emit('input', newVal)
      }
    }
  }
}

</script>

props를 통해 부모 세대로부터 받은 computed 을 별명 속성inputData으로 수신하고, 하위 세대 측면inputData에서 변경이 발생하면 set 함수에서 새 값을 가져와 부모 세대로 되돌려줍니다.$emit 전송input 이벤트는 데이터를 부모 세대v-model 값에 연결합니다.
이것은 v-model(=v-on:input과v-bind:value가 양방향 데이터 귀속을 진행했기 때문이다.