[vue]@change이벤트

[chage 이벤트]

사용자가 새로운 입력한 후 버튼을 클릭하거나 엔터를 치면 발동되는 이벤트

 

[예시]

<template>
  <div class="search">
    <input 
      type="search" 
      @change="
        $emit({부모component 함수}, $event.target.value);
        $event.target.value = ''
      "
      placeholder="검색어 입력"
    >
    <button>검색</button>
  </div>
</template>

1. 사용자가 input칸에 입력한후 enter나 검색버튼 클릭

2. @change이벤트 발동

3. {부모 component의 함수}로 입력값($event.target.value) 전달