Vue 3 Forms - Base Input

Creating reusable components for each specific input type will allow us to easily replicate them, modify them and also extend them.

각 입력 유형에 대해 재사용 가능한 구성 요소를 만드는 것은 우리로 하여금 이를 쉽게 복제하고 수정하고 확장하게 할 수 있다.

Base Input

SimpleForm.vue 에서  BaseInput.vue in our  components folder 로 이전하는 과정을 통하여 reusable component 를 만든다.

 

SimpleForm.vue

<template>
  <div>
    <h1>Create an event</h1>
    <form>

      <h3>Name & describe your event</h3>

      <label>Title</label>
      <input
        v-model="event.title"
        type="text"
        placeholder="Title"
        class="field"
      >

      <label>Description</label>
      <input
        v-model="event.description"
        type="text"
        placeholder="Description"
        class="field"
      />

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      event: {
        title: '',
        description: '',
      }
    }
  }
}
</script>

 

Design note.

• label 을 prop 로 만들어 parent 에서 정의된 것을 prop로 받아서 component 안의 label과 placeholder value 로 사용한다.
• component 화 되기 전에 사용한 v-model directive 가  component 화 되면,  patent 에서 component 를 호출할 때는 v-model directive를 사용하지만 component 안에서는   modelValue 와 emit 를 이용하여 구현이된다.
• component 화 되기 전에  사용한 type 도 component 화 되면서 component 안에서는  사용하지 않게 되는데 이는  parent 의 attribute 에 일부로 포함이 되어 $attr 를 이용할 수 있기 때문이다.
• patent 에서 component 호출할 때 type 을 정하는데 email 이나 password  type  같은 것으로 정하여 호출한다.

 

BaseInput.vue 

아래 "modelValue" Props 을 이용하여 외부의 값을 받을 수 있다.
Now that we have our modelValue property set and bound to the input attribute of the input element.

이제 modelValue 속성이 설정되고 입력 요소의 입력 속성에 바인딩되었습니다.

<template>
  <label v-if="label">{{ label }}</label>
  <input
    :value="modelValue"
    :placeholder="label"
    class="field"
  >
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },  
    modelValue: {
      type: [String, Number],
      default: ''
    }
  }
}
</script>

v-model: Binding to the value

By default in Vue 3, v-model expects a property named modelValue to be on your v-model-capable component.

Vue3 에서는 v-model capable component 에서는 modelValue property 가 있을 것이라고 기대한다. 그러로  modelValue propery 를 추가하고 value 와 binding 을 한다.

 

v-model: Emitting the update:modelValue event

BaseInput.vue

<template>
  <label v-if="label">{{ label }}</label>
  <input
    :value="modelValue"
    :placeholder="label"
    @input="$emit('update:modelValue', $event.target.value)"
    class="field"
  >
</template>

<script>
export default {
  props: {
    label: {
      type: 'String',
      default: ''
    },  
    modelValue: {
      type: [String, Number],
      default: ''
    }
  }
}
</script>

위의 BaseInput.vue 을 사용하면 SimpleForm.vue 은 다음과 같이 변경이 될 수 있다.

 

SimpleForm.vue

<form>
  <h3>Name & describe your event</h3>

  <BaseInput
    v-model="event.title"
    label="Title"
    type="text"
  />

  <BaseInput
    v-model="event.description"
    label="Description"
    type="text"
  />

  <button type="submit">Submit</button>
</form>

<script>
export default {
  data () {
    return {
      event: {
        title: '',
        description: '',
      }
    }
  }
}
</script>

 

@input="$emit('update:modelValue', $event.target.value)"

 

All components that are capable of being v-modeled have to emit an event in order for the parent to be able to catch the updates to that component’s data.

v-모델링이 가능한 모든 구성 요소는 부모가 해당 component  데이터에 대한 업데이트를 잡을 수 있도록 이벤트를 발생시켜야 한다.

 

In Vue 3, by default all v-model contracts expect for your component to emit an "update:modelValue" event, regardless of what type of input, or inputs, your component contains.

Vue3 에서는 기본적으로 component 가 어떤종류의 input type 을 포함하고 있건 간에 update:modelValue event 를 emit 한다고 기대헌다.

 

v-mode 을 이용하여 parent 에서 component 에서 호출하면  component 내에서는  data binding 과 event 처리를  modelValue 를 이용한 emit 이용하여 처리하게 한다. 

 

 

Assigning the $attrs to the input

https://ko.vuejs.org/guide/components/attrs.html

폴스루 속성 | Vue.js

  <input

    v-bind="$attrs"

    :value="modelValue"

    :placeholder="label"

    @input="$emit('update:modelValue', $event.target.value)"

    class="field"

  >

• $attrs 객체에는 컴포넌트의 props 또는 emits 옵션으로 선언되지 않은 모든 속성(예: class, style, v-on 리스너 등)이 포함됩니다.
• $attrs object 를 bind 허여 attribute 를 input element 에 직접 inject 할 수 있다 input element 는 parent 에서 binding 된 type 이나 CSS class 를 input element 가 받을 수 있다.
  
  

https://github.com/pidokige02/Vue-3-Form-demo

GitHub - pidokige02/Vue-3-Form-demo