[컴][js] vuejs 에서 child element 의 값을 parent element 로 보내는 방법

 custom model / vuejs 동기 / child 에서 변경된 값 알아내는 / root 에서 child / vuejs 에서 parent element 의 값을 child element 에서 변경

vuejs 에서 child element 의 값을 parent element 로 보내는 방법

• javascript - vuejs update parent data from child component - Stack Overflow

code exmple

// MyParentEl.vue
<template>
    <my-element
        :value-prop-one="formData.val1"
        :value-prop-two="formData.val2"
        @input-value1="formData.val1 = $event"
        @input-value2="formData.val2 = $event"
      />
</template>
<script>
import MyElement from './MyElement'

export default {
  name: 'MyParentEl',
  components: {
    MyElement,
  },
  data() {
    
    return {
      formData: {
        val1: 0,
        val2: 1
      }
    }
  }
}
</script>

// MyElement.vue
<template>
  <div>
      <input v-model="value1Computed" />
      <input
        v-model="value2Computed"
      />
  </div>
</template>

<script>

export default {
  name: 'MyElement',
  components: {},
  props: {
    valuePropOne: {
      type: [Number],
      required: true
    },
    valuePropTwo: {
      type: [Number],
      required: true
    }
  },
  data() {
    return {
    }
  },
  computed: {
    value1Computed: {
      get() {
        return this.valuePropOne
      },
      set(curVal) {
        if(this.valuePropOne !== curVal){ // 이것을 안넣어주면, 여러번 호출된다.
          this.$emit('input-value1', curVal)
        }
      }
    },
    value2Computed: {
      get() {
        return this.valuePropTwo
      },
      set(curVal) {
        if(this.valuePropTwo !== curVal){
          this.$emit('input-value2', curVal)
        }
      }
    }
  }
}
</script>

<style>
</style>