휴식 시간 동안의 Vue - 사용자 지정 구성 요소와 함께 v-model 사용.

이 시리즈의 목적은 모든 애플리케이션에 빠르게 적용할 수 있는 고급 Vue 개념에 대한 팁과 트릭을 게시하고 문제에 접근할 수 있는 새로운 무기를 제공하는 것입니다.

이 짧은 기사에서는 v-model의 작동 방식과 모든 Vue 구성 요소에 적용할 수 있는 방법을 설명합니다.

v-모델 이해

v-model는 거의 모든 Vue 애플리케이션에서 사용되는 공통 지시문입니다. 일반적으로 양식 요소에서 양방향 데이터 바인딩을 활성화하는 데 사용되며 input , checkbox , select , textarea 및 radio 와 완벽하게 작동합니다.

아래 예에서 v-model 요소에 적용된 input는 someVal 변수를 입력의 기본value 속성과 바인딩합니다.

<input v-model="someVal">

그런 다음 지시문은 기본input 이벤트를 수신하고 이벤트가 발생할 때마다 업데이트someVal합니다.

따라서 위의 코드를 잘 알려진 이벤트와 소품에 동일한 효과로 다시 작성할 수 있음이 밝혀졌습니다.

<input
  v-bind:value="someVal"
  v-on:input="someVal = $event.target.value"
>

이것이 정규 입력에 적용된 v-model가 후드 아래에서 작동하는 방식입니다.

이것을 알면 v-model 이벤트를 내보내고 input 소품을 수락하는 모든 구성 요소에서 value를 사용할 수 있습니다.

이것을 보십시오MagicCounter.

<template>
  <div>
    <button @click="changeValue(value-1)">-</button>
    <span>{{ value }}</span>
    <button @click="changeValue(value+1)">+</button>
  </div>
</template>

<script>
export default {
  props: ["value"],
  methods: {
    changeValue(newVal) {
      this.$emit("input", newVal);
    }
  }
};
</script>

변경될 때마다 새 값으로 input 이벤트를 내보내고 value 소품을 수락하므로 이 구성 요소에서 v-model 지시문을 안전하게 사용할 수 있습니다.

<MagicCounter v-model="count" />

커스텀 컴포넌트와 함께 v-model 사용하기

이벤트 생각 input 및 value 쌍은 입력 유형에 따라 v-model에 대한 기본 설정이며, 이러한 바인딩은 다를 수 있습니다(자세한 내용은 it's source code을 확인하는 것이 좋습니다). 예를 들어 checkbox 요소에서 checked 속성과 change 이벤트가 기본 요소 대신 사용됩니다.
v-model 속성을 통해 model 지시문에서 수락한 이벤트/소품 쌍을 사용자 지정하는 것으로 나타났습니다. 예를 들어 checkbox 요소의 경우 다음과 같습니다.

model: {
  prop: 'checked',
  event: 'change'
}

MagicCounter에서 발생하는 이벤트의 이름을 더 설명적인 이름으로 변경할 수 있습니다(예: modified ).

이 사용자 지정 이벤트를 v-model와 함께 작동시키는 방법을 살펴보겠습니다.

<template>
  <div>
    <button @click="changeValue(value-1)">-</button>
    <span>{{ value }}</span>
    <button @click="changeValue(value+1)">+</button>
  </div>
</template>

<script>
export default {
  props: ["value"],
  model: {
    event: `modified`
  },
  methods: {
    changeValue(newVal) {
      this.$emit("modified", newVal);
    }
  }
};
</script>

..그리고 짜잔! 이제 모든 Vue 구성 요소에서 v-model를 사용하는 방법을 알게 되었습니다. 곧 이 지식을 사용할 수 있는 방법을 찾을 수 있기를 바랍니다.

Here 게시물의 코드가 포함된 작업 예제를 찾을 수 있습니다.

시리즈의 다음 부분을 기대해 주세요!