[Vue] 컴포넌트간 통신 - 반응형 데이터 (reactive)

dhkim 6월 22, 2024

 



 이번 포스팅에서는 이 전 포스팅 "컴포넌트간 통신 - 반응형 데이터(toRef, toRefs)"와 동일한 목적과 동작을 구현하지만, Vue의 단방향 통신을 지향하는 취지를 벗어나는 방식입니다.


1. 예시

   부모, 자식, 손자 순서로 세 단계로 전파되는 입력 값(props)을 제시하고, 각 위치에서 변경된 값이 연관된 부모 혹은 자식 컴포넌트에 전달되는 환경을 구성합니다.





2. Props 값을 자식 컴포넌트에서 수정했을 때 발생하는 메시지

 : Set operation on key ~ failed : target is readonly




3. Reactive

 아래 코드 처럼 "Reactive"로 props의 반응형 변수를 참조하여, 할당하는 경우 반응성이 유지됩니다.
단, Vue에서 지향하는 단방향 통신을 거스르는 방식으로 가능한 사용하지 않도록 하는 것이 좋겠습니다.

[Parents.vue]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <section>
    <h1># 컴포넌트 간 통신(반응형) 예제 실습</h1>
  </section>
  <section>
    <div class="parents-content">
      <h2>Parents</h2>
      <div>
        <span>Input : </span>
        <input type="text" v-model="originData.value" />
      </div>
      <div>
        <FirstChildren :originData="originData"></FirstChildren>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import FirstChildren from '@/components/FirstChildren.vue'

import { reactive } from 'vue'

const originData = reactive({ value: 'ttt' })
</script>
  • (Line:: 24) reative로 선언된 부모 원본 값 (반응형)

[Child.vue]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div class="child-content">
    <h2>Child</h2>
    <section class="container">
      <div class="item">
        <span>1) Origin Data : </span>
        <div>{{ props.originData.value }}</div>
      </div>
      <div class="item">
        <span>2) My Data : </span>
        <input type="text" v-model="myData.value" />
      </div>
    </section>
    <div>
      <GrandChild :originData="myData"></GrandChild>
    </div>
  </div>
</template>

<script setup lang="ts">
import GrandChild from '@/components/GrandChild.vue'
import { reactive } from 'vue'

const props = defineProps<{
  originData: any
}>()

const myData = reactive(props.originData)
</script>
  • (Line:: 28) 부모의 반응형 변수 (props.originData)를 다시 reactive로 반환하여 정의


0 댓글

최근