1-9. 재사용 컴포넌트, 부모<->자식 간 값 전달

 

<template>

  <h3>{{ title }}</h3>

</template>

<script>

export default {

  components: {},

  props: {

    title: {

      type: String,

      default: '페이지 제목'

    }

  },

 

props에 정의되어 있는 데이터 변수들은 부모로부터 전달된 값들이다.

 

즉, props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다.

 

 

 

,

custom event, emit, refs - 부모와 자식 컴포넌트간 값 전달을 위해 필요한 기능들

 

예제

ParentView.vue

<template>

  <div>

    <button @click="changeValue">변경</button>

    <child-com

      v-bind:str="strParent"

      :num="numParent"

      :isOk="isOkParent"

      :arr="arrParent"

      :obj="objParent"

      @change-num="getData"

      ref="child1"

    ></child-com>

  </div>

</template>

<script>

import ChildComponent from '@/components/fragments/ChildComponent.vue'

export default {

  components: { 'child-com': ChildComponent },

  data() {

    return {

      sampleData: '',

      strParent: '개발자의품격2',

      numParent: 12,

      isOkParent: true,

      arrParent: [1, 2, 3, 4, 5],

      objParent: { name: 'jeremy' }

    }

  },

  created() {},

  mounted() {},

  unmounted() {},

  methods: {

    getData(data) {

      console.log('자식 컴포넌트에서 이벤트 호출')

      console.log(data)

    },

    changeValue() {

      this.$refs.child1.str2 = 'Seoul'

      this.$refs.child1.printMessage()

    }

  }

}

</script>

 

 

ChildComponent.vue

<template>

  <div>

    <p>{{ str }}</p>

    <p>{{ str2 }}</p>

    <p>{{ num }}</p>

    <p>{{ isOk }}</p>

    <p>{{ arr }}</p>

    <p>{{ obj }}</p>

    <select name="" id="" @change="callParent" v-model="selectedNum">

      <option :value="num" :key="num" v-for="num in arr">{{ num }}</option>

    </select>

    <button @click="callParent">부모로 데이터 전달</button>

  </div>

</template>

<script>

export default {

  props: {

    str: {

      type: String,

      default: ''

    },

    num: { type: Number, default: 0 },

    isOk: {

      type: Boolean,

      default: false

    },

    arr: {

      type: Array,

      default: function () {

        return []

      }

    },

    obj: {

      type: Object,

      default: function () {

        return {}

      }

    }

  },

  components: {},

  data() {

    return {

      selectedNum: 1,

      str2: 'Jeju'

    }

  },

  created() {},

  mounted() {},

  unmounted() {},

  methods: {

    callParent() {

      // emit은 부모가 정의해놓은 Custom 이벤트를 호출해주는 함수 실행한다.

      // 두 번째 파라메터에 값도 실어서 넘길 수 있다.

      this.$emit('change-num', this.selectedNum)

    },

    printMessage() {

      console.log('printMessage')

    }

  }

}

</script>