V-model

v-model 이란

v-model의 역할은 변경과 데이터를 엮어주는 것 이라고 할 수 있다. 이것이 머냐 ?
(1) 표시할 데이터
(2) 변경이 있다면 데이터에 반영 이 두 가지를 세트로 한 것이 쌍방향(two-way) 데이터 바인딩이며, 이것을 v-model이 해준다는 것이다.

v-model 을 사용을 하면서 form 의 input,textarea,select HTML 태그들을 사용자의 입력을 받아 사용자가 실시간으로 볼 수 있고 전송을 데이터에 반영할 수 있도록 하는 것이다!

v-model 은 Element 마다 사용법이 정해져 있다.

(1) 텍스트와 여러 행의 텍스트는 value 속성과 input 이벤트를 사용한다.
(2) 체크박스와 라디오 박스는 checked 속성과 change 이벤트를 사용한다.
(3) 선택 필드는 value 속성과 change 이벤트를 사용한다.

다음 예는 텍스트 이므로 value, input 으로 전개한 것이다.
ex)

<template>
  <input :value="username" @input="username = $event.target.value" />
  <p>username: {{ username }}</p>
</template>

<script>

export default {
  data: () => {
    return {
      username: "username"
    };
  }
}
</script>

Compontent 에서 사용법

Component 에서 데이터 전송을 할때는 주의 사항이 있다. 보통 부모에서 자식에게 데이터를 전송을 할 때는 props 를 사용하여 전달할 값을 v-model에 대입하면 되지 않나? 라는 생각이 들 수도 있지만 안된다 왜냐? props는 부모에게 자식에게 데이터를 보내는 일방 통행이기 때문에 Custom event $emit 을 사용하여 자식이 부모에게 데이터를 보내야한다.
(어쩌구 자식.vue)

<div class="write">
    <textarea @input="$emit('write' , $event.target.value)" class="write-box">write!</textarea>
  </div>

(부모.vue)

 <theContainer @write="insertContent = $event">

위 자식 컴포넌트와 부모 컴포넌트 코드를 해석하면 다음과 같다.

1. 부모 컴포넌트에서 자식 컴포넌트의 v-model은 :value와 @input로 해설된다.

2. 자식 컴포넌트의 input에는 value(username)이 전해진다.

3. 자식 컴포넌트의 input에 입력이 있다면 emit으로 부모의 v-model에 $event.target.value가 전달되는 것으로 username에 값이 반영된다.

   props 자체는 변경하지 않고, 변경된 것을 emit으로 부모에게 알려주면 된다.