Vue.js에서 사용자 지정 구성 요소에 양방향 데이터 바인딩을 추가하는 방법

소개

이 문서에서는 Vue.js에서 사용자 지정 구성 요소에 대한 v-model 지시문을 추가하는 방법에 대해 알아봅니다. v-model 지시문은 바닐라 Vue.js 구성 요소에 양방향 데이터 바인딩을 추가하는 강력한 자산이지만 사용자 지정 구성 요소에 대한 지원은 실행되지 않습니다.

전제 조건

Vue.js의 양방향 데이터 바인딩에 대한 이해가 필요하지만 필수는 아닙니다. 양방향 데이터 바인딩에 대해 자세히 알아보려면 Vue.js 튜토리얼에서 양방향 바인딩에 v-model을 사용하는 방법을 확인하세요.

v-model 지시문 구현

구성 요소에서 v-model 지원을 구현하는 방법을 이해하려면 내부적으로 어떻게 작동하는지 이해해야 합니다. v-model=prop 값은 :value=prop @input=prop=arguments\[0\]의 줄임말입니다.

따라서 v-model 지시문과 호환되는 구성 요소를 만들려면 :value 및 @input 속성을 추가하고 내보낼 수 있어야 합니다. 사용자가 Vue.js 애플리케이션과 상호 작용할 때의 값입니다.

DatePicker.vue 파일에서 개체의 월 및 년 값을 허용하는 사용자 지정 구성 요소를 만듭니다. :value 및 @input 속성은 구성 요소에서 참조되는 값을 나타냅니다. month 및 year 값에 대한 입력으로 템플릿을 설정합니다.

<template>
  <div class="date-picker">
    Month: <input type="number" ref="month-picker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="year-picker" :value="value.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value
      })
    }
  }
};
</script>

script 태그 내에서 사용자 지정 메서드 updateDate()는 .$emit() 공개 인스턴스 속성을 적용하여 의 값을 업데이트합니다. 월 및 연도는 사용자 입력을 기반으로 합니다.

다른 Vue.js 파일에서 사용자 지정 구성 요소를 사용하려면 v-model 지시문을 설정하여 month 및 year 속성의 값을 바인딩하고 추가합니다. WrapperComponent.vue 파일에서:

<template>
  <div class="wrapper">
    <date-picker v-model="date-picker"></date-picker>
    <p>
      Month: {{date.month}}
      Year: {{date.year}}
    </p>
  </div>
</template>

script 태그 내에서 사용자 지정 구성 요소를 가져와 components 속성에 삽입합니다. 이렇게 하면 DatePicker 구성 요소에 포함된 기능이 WrapperComponent.vue 파일에 사용됩니다.

<script>
import DatePicker from './DatePicker.vue';

export default {
  components: {
    DatePicker
  },

  data() {
    return {
      date: {
        month: 1,
        year: 2017
      }
    }
  }
})
</script>

data() 모델은 month 및 year 속성의 값을 저장하고 반환합니다.

검토하려면 한 번의 호출로 업데이트된 날짜를 추가하고 내보내려면 :value 및 @input 속성이 사용자 지정 구성 요소를 사용한 양방향 바인딩에 필요합니다.

Advanced Components에서 v-model 연습하기

하나 이상의 계산된 속성을 사용하여 문자열과 같은 데이터를 요소가 관리할 수 있는 형식 입력으로 통합할 수 있습니다. 이는 잠재적인 다양한 입력 형식을 처리하는 고급 사용자 지정 구성 요소와 함께 자주 사용됩니다.

StringDatePicker.vue 파일에서 m/yyyy 구조의 문자열을 전달하는 사용자 지정 구성 요소를 만듭니다. :value 및 @input 속성을 입력으로 설정하여 사용자 지정 구성 요소에서 값을 수락하고 업데이트합니다.

<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
  </div>
</template>

계산된 속성(이 경우 splitDate)을 사용하여 입력 문자열을 분할하여 month 및 year 속성이 있는 객체로 반환할 수 있습니다.

[label StringDatePicker.vue] 
<script>
export default {
  props: ['value'],

  computed: {
    splitDate() {
      const splitValueString = this.value.split('/');

       return {
        month: splitValueString[0],
        year: splitValueString[1]
      }
    }
  },

  methods: {
    updateDate() {
      const monthValue = this.$refs.monthPicker.value;
      const yearValue = this.$refs.yearPicker.value;
      this.$emit('input', `${monthValue}/${yearValue}`);
    }
  }
};
</script>

methods 개체는 updateDate() 속성을 적용하여 입력 문자열에서 업데이트된 month 및 year를 내보냅니다. 이제 StringDatePicker 고급 사용자 지정 구성 요소를 다른 파일로 가져오고 v-model 지시문을 작동하여 월의 값을 바인딩하고 추가할 수 있습니다. 연도 속성을 한 번에.

결론

v-model 지시문은 사용자 지정 Vue.js 구성 요소에서 구현될 때 추가 기능을 제공합니다. 양방향 데이터 바인딩을 고급 사용자 지정 구성 요소에 통합하여 데이터 유형을 정확한 형식으로 조작할 수도 있습니다.

Vue.js에 대한 자세한 내용은 Vue.js 주제 페이지를 확인하세요.