# 2. 할 일 관리 앱 - 추가 기능 구현

###### tags: `지호`, `Vue.js + TypeScript 완벽 가이드`

---

## 1. emit 이벤트

// input 이벤트: 키보드 이벤트
<input id="todo-input" type="text" :value="item" @input="handleInput" />
    
// input emit 이벤트: 다른 컴포넌트에게 이벤트를 전달  
handleInput(event: any) {
     event.target.value;
     this.$emit("input", event.target.value);
}

참고: https://kr.vuejs.org/v2/guide/components-custom-events.html

<br/>

## 2. 개념 정리 및 비교


### props & emit
특정 컴포넌트 사이에서의 이벤트 전달
- props: 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달
- emit: 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 보냄
- 부모컴포넌트에선 @를 사용하여 해당 이벤트를 받음

### v-model
- v-bind + v-on
- input, select, textarea에서 사용 가능
- 내부적으로 value값을 내려줘서 input값으로 끌어올림
- `@input`
- `:value`
- 한/일/중어에서 입력값 처리에 딜레이가 있음
참고: https://joshua1988.github.io/web-development/vuejs/v-model-usage/

### v-bind
- 하나의 컴포넌트 내에서 데이터 바인딩

<br/>

## 3. input 속성 유효성 검사 및 타입 정의

- props의 type와 required 지정
- as를 이용하여 이벤트 타겟 타입 구체화


<br/>