emits
상위 컴포넌트에서 prop을 전달하면 하위 컴포넌트는 $emit을 통해 전달받은 prop을 변경하는 커스텀 이벤트를 상위 컴포넌트에 전달함으로서 하위 컴포넌트에서도 prop을 변경할 수 있다.
이 때 emits이라는 옵션을 추가해서 명시적으로 커스텀 이벤트를 등록시키는 것이 추후 관리에 용이하다.
emits는 커스텀 이벤트를 명시하는 것만으로 쓰이지 않는다.
emits 옵션을 사용할 때 주의해야 할 점이 있는데 네이티브 이벤트와 동일한 커스텀 이벤트를 emits에 명시할 시 커스텀 이벤트가 덮어쓰게된다.
따라서 커스텀 된 click 이벤트가 등록된 곳이 없기 때문에 아래 예제에서 click 이벤트는 동작하지 않는다.
이런 식으로 등록하면 B에만 커스텀된 click 이벤트가 발생된다.
emits을 통해 유효성 검사를 할 수 있다.
props 옵션처럼 객체 리터럴로 명시할 수도 있다.
click 이벤트는 별도의 검사를 하지 않는다고 null로 명시하고 please 이벤트는 검사를 진행하고 있다.
검사 함수에서는 $emit에서 전달한 매개변수를 받을 수 있다.
컴포넌트의 양방향 데이터 바인딩 구현
아래 예제에서는 Hello 컴포넌트에 msg라는 prop을 전달하였고
Hello 컴포넌트에서 $emit을 통해 update라는 커스텀 이벤트를 input의 value와 함께 App 컴포넌트에 전달하였다.
App 컴포넌트에서는 update라는 커스텀 이벤트를 사용하여 msg 데이터를 변경한다.
위 과정을 v-model을 통해서 간략화 할 수 있다.
modelValue는 자동으로 v-model이라는 디렉티브와 연결되어 있다.
v-model에 들어온 값은 modelValue로 전달된다.
update뒤에 modelValue를 작성해야한다. update 이벤트도 v-model에 사용될 수 있도록 예약이 되어있다.
만약 data를 modelValue가 아닌 다른 이름으로 지정하고 싶으면 v-model뒤에 :변수명 형식으로 명시해야 한다.
양방향 데이터 바인딩을 하는 데이터를 여러 개 지정할 수도 있다.
