[Vue.js] parent <-> child간 양방향 바인딩(with custom Tag)

방법1. .sync를 사용하기

 

 

parent

<TextDebounceForm :value.sync="systemItem.id" />

child

<template>
  <div class="form-cont">
      <input v-model="val" />
     </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class InputGroup extends Vue {
  @Prop({ default: '' }) value!: string;
  get val() {
    return this.value;
  }
  set val(newVal) {
    this.$emit('update:value', newVal);
  }

}
</script>

 

v-model 활용하기

parent

<InputGroup :v-model="systemItem.nm" />

 

child

<template>
  <li>
    <label for="" class="label point">{{ inputNm }}</label>
    <div class="form-cont">
      <input v-model="formValue"/>
      <p v-if="validCheck !== ''" class="red-txt noti">{{ validCheck }}</p>
    </div>
  </li>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class InputGroup extends Vue {
  formValue = '';
  @Watch('formValue')
  onChanged(newVal: string) {
    this.$emit('input', newVal);
  }
}
</script>