Vue.js의 구성 요소 간 데이터 전달 요약

Overview

Vue.js 를 사용하고 있어, 이 Component 사이의 관계라고 어떻게 data 건네주는 것일까...?
가 되는 것이 많기 때문에 방법은 여러가지 있다고 생각합니다만, 자신이 잘 하는 방법을 이 기사에 정리해 둡니다.
(그 밖에도 이런 방법이 있어!

부모 → 아이

부모 Component 로부터 아이 Component 에의 데이터의 전달은,
부모 Component 에서 data 를 v-bind 하고, 아이 Component 로 props 로 data 를 꺼냅니다.

샘플 코드

Parent.vue (v-bind로 데이터 전달)

<template>
  <div id="parent">
    <child v-bind:messageFromParent="this.message" />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  data () {
    return {
      message: 'Hello from Parent!'
    }
  },
  components: {
    child: Child
  },
}
</script>

Child.vue (props에서 인수)

<template>
  <div id="child">
    {{ messageFromParent }}
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['messageFromParent']
}
</script>

아이 → 부모

반대로, 아이 Component 로부터 부모 Component 에의 데이터의 전달은
부모 Component 에서 v-on 으로 이벤트 핸들러를 정의해 두고, 아이 Component 에서는 $emit 로 data 를 갖게 해 부모 Component 로 제기하고 있는 이벤트를 발화시킵니다.

※ emit : 발사, 방사

샘플 코드

Parent.vue (v-on에서 이벤트 핸들러 정의)

<template>
  <div id="parent">
    <child v-on:sendMessage="receiveChildMessage" />
    {{ this.childMessage }}
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  data () {
    return {
      childMessage: ''
    }
  },
  components: {
    child: Child
  },
  methods: {
    receiveChildMessage (message) {
      this.childMessage = message
    }
  }
}
</script>

Child.vue ($ emit로 data를 가지면서, 부모의 이벤트를 발화한다)

<template>
  <div id="child"/>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      message: 'Hello from Child!'
    }
  },
  created () {
    this.$emit('sendMessage', this.message)
  }
}
</script>

아이 A → 아이 B

이것은 구현의 방침이 사람에 의해 나눌 것입니다만, 자신은 2 개 이상의 Component 에 걸쳐 data 의 전달을 실시하는 경우 (아이 A → 부모 → 자식 B , 부모 → 자식 → 손자 등) Vuex 를 사용하는 것 많습니다.

※ Vuex에 대한 자세한 내용은 여기를 참조하십시오.
htps : // ㅔ에 x. 아 js. 오 rg / 그럼 /

샘플 코드

store.ts

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

interface State {
  message: string
}

const initState: State = {
    message: ''
};

export default new Vuex.Store({
  state: initState,
  mutations: {
    setMessage(state, { message }: { message: string }) {
      state.message = message;
    }
  }
})

Parent.vue ( store import )

<template>
  <div id="parent">
    <child-a />
    <child-b />
  </div>
</template>

<script>
import store from './store'
import ChildA from './ChildA'
import ChildB from './ChildB'

export default {
  name: 'Parent',
  store,
  components: {
    child-a: ChildA,
    child-b: ChildB
  },
}
</script>

ChildA.vue (Vuex에 data를 store 한다)

<template>
  <div id="child-a"/>
</template>

<script>
export default {
  name: 'ChildA',
  created () {
    this.$store.commit('setMessage', { message: 'Hello from ChildA!' });
  }
}
</script>

ChildB.vue (Vuex에서 data 참조)

<template>
  <div id="child-b"/>
  {{ this.message }}
</template>

<script>
export default {
  name: 'ChildB',
  data () {
    return {
      message: ''
    }
  },
  created () {
    this.message = this.$store.state.message
  }
}
</script>

요약

부모 Component → 자식 Component

(親) v-bind:'value' → (子) props['value']

아이 Component → 부모 Component

(子) this.$emit('childHandler', value) → (親) v-on:childHandler="parentHandler"

아이 Component A → 아이 Component B

(子A) Vuex に data を store → (子B) Vuex から data を参照