Vue.js + Vuetify에서 상위 자손 구성 요소 간의 데이터 전달 (+ 고려)

소개

Vue.js + Vuetify 에서 부모-자식-손자의 3세대에서 양방향 바인딩의 구현과 거동을 확인합니다.
Vue.js에서 구성 요소간에 데이터를 전달하는 방법에는 여러 가지가 있지만 이번에는 ゔ그림x을 사용하지 않는 방법을 소개합니다.
그렇다고는 해도 이미 다양한 예가 위대한 선인들로부터 소개되고 있기 때문에, 이번은 데이터 전달로부터 또 한 걸음 밟은 고찰도 하고 싶습니다.
또한 Vuetify의 사용은 개인적인 취향입니다.

개정 내역

2020-06-10: typo 수정(firld → field)

환경

Vue.js: 2.6.10
Vuetify: 2.1.0

양방향 바인딩(3세대)

부모와 자식과 손자에게 돋보이는 텍스트 영역을 사용하여 3세대에서 양방향 바인딩이 움직이는 것을 확인합니다.

손자

GrandChild.vue

<template>
    <v-textarea
        label="Grandchild"
        v-model="grandchildFieldComputed"
    />
</template>

<script>
export default {
    props: {
        grandchildField: null
    },
    computed: {
        grandchildFieldComputed: {
            get () {
                return this.grandchildField
            },
            set (value) {
                this.$emit('update:grandchildField', value)
            }
        }
    }
}
</script>

해설

    props: {
        grandchildField: null
    }

props 의 정의로 아이 (손자로부터 본 부모)로부터의 데이터를 받습니다.

        grandchildFieldComputed: {
            get () {
                return this.grandchildField
            },
            set (value) {
                this.$emit('update:grandchildField', value)
            }
        }

'update:grandchildField' 에서 이벤트 발화.

아이

Child.vue

<template>
    <v-container>
        <v-row>
            <v-textarea
                label="Child"
                v-model="childFieldComputed"
            />
        </v-row>

        <v-row>
            <GrandChild
                v-bind:grandchild-field.sync="childFieldComputed"
            />
        </v-row>
    </v-container>
</template>

<script>
import GrandChild from './GrandChild'

export default {
    components: {
        GrandChild
    },
    props: {
        childField: null
    },
    computed: {
        childFieldComputed: {
            get () {
                return this.childField
            },
            set (value) {
                this.$emit('update:childField', value)
            }
        }
    }
}
</script>

해설

            <GrandChild
                v-bind:grandchild-field.sync="childFieldComputed"
            />

.sync 한정자로 손자(아이로부터 본 아이)의 grandchildField (props 와 이벤트)와 묶는다.

    props: {
        childField: null
    }

props 의 정의로 부모로부터의 데이터를 받습니다.

        childFieldComputed: {
            get () {
                return this.childField
            },
            set (value) {
                this.$emit('update:childField', value)
            }
        }

'update:childField' 에서 이벤트 발화.

부모

Parent.vue

<template>
    <v-container>
        <v-row>
            <v-textarea
                label="Parent"
                v-model="fieldComputed"
            />
        </v-row>

        <v-row>
            <Child
                v-bind:child-field.sync="fieldComputed"
            />
        </v-row>
    </v-container>
</template>

<script>
import Child from './Child'

export default {
    components: {
        Child
    },
    data: () => ({
        field: null
    }),
    computed: {
        fieldComputed: {
            get () {
                return this.field
            },
            set (value) {
                this.field =value
            }
        }
    }
}
</script>

해설

            <Child
                v-bind:child-field.sync="fieldComputed"
            />

.sync 한정자로 아이의 childField (props 와 이벤트)와 묶는다.

동작 확인

부모(Parent), 자식(Child), 손자(Grandchild)의 텍스트 영역에 각각 입력하면 3세대 모든 텍스트 영역에 값이 연계되어 있는 것을 알 수 있습니다.

고찰

이하, 사견입니다만 데이터 전달의 구현 방법으로부터 고찰합니다.
이번에는 사용하지 않지만 Vuex는 Vue.js에서 상태 관리를위한 매우 유용한 라이브러리입니다.
이번과 같은 컴퍼넌트를 넘은 데이터의 전달은 Vuex 를 사용해도 구현할 수 있습니다.
그러나 모든 VUex 상태 관리를 수행하면 다른 문제가 발생합니다.
컴퍼넌트는 가능한 한 재이용할 수 있는 형태로 구현해야 합니다만, 그 때문에는 컴퍼넌트의 독립성을 보증할 필요가 있습니다.
상태 관리에 Vuex를 사용한 컴포넌트는 용도가 Vuex에 의존해 독립성이 낮아져, 결과, 그 컴퍼넌트는 재이용하기 어려워집니다.
예를 들어 이번 경우에서는 3세대간의 데이터 전달에서 Vuex를 사용하면 3세대의 컴퍼넌트 모두가 Vuex에 의존합니다만, Vuex의 사용을 부모에게 한정(=상태 관리를 부모에게 위양)하면 아이와 손자의 독립성은 유지되고 자녀와 손자는 재사용 가능한 구성 요소가됩니다.
컴퍼넌트의 재이용은, 코드량이 줄어든다 = 버그가 줄어들게 되기 때문에, 구현시는 항상 의식해 두고 싶은 곳이군요.

요약

3세대에서의 양방향 바인딩의 구현과 거동을 확인할 수 있었습니다.
또, 컴퍼넌트간의 데이터 전달을 어떻게 구현하는지는 컴퍼넌트의 재이용성을 어떻게 실현해 나가는가 연결되는 것을 알았습니다(대폭).

이번에 사용한 코드는 GitHub에서 공개하고 있습니다.
htps : // 기주 b. 코 m / 폰코 2 분분 / ゔ 에치 fy 파렌 t_ 치 ld_ g 란 d 치 ld mp ぇ