Emit : Vue에서 하위 컴포넌트에서 상위 컴포넌트의 state를 업데이트 하는 방법
State 끌어올리기: React에서 상위 컴포넌트의 state를 업데이트 하는 방법
아마도 Vue의 여러 기능 중 React와 구현 방식에서 가장 큰 차이를 보이는 부분이 아닐까 한다. React의 경우 Props를 제어하는 함수를 하위 컴포넌트에 전달해서 Props를 변경하는 반면, Vue의 경우 emit을 통해 이벤트를 발생시키고, 필요한 데이터를 전달하여 상위 컴포넌트의 state를 변경한다.
//자식컴포넌트
<templates>
<div @click="fireEmit" />
</templates>
...
<script>
export default {
name : "Child"
methods : {
//emit이벤트 발생시 실행할 함수
fireEmit() {
this.$emit("emit-event-name", data)
}
}
}
</script>
...
this.$emit
으로 emit 이벤트를 실행한다//부모컴포넌트
<templates>
<Child @emit-event-name="emitFunction" />
</templates>
...
<script>
export default {
name : "Parent"
methods : {
//emit이벤트 발생시 실행할 함수
emitFunction(data) {
...
//emit과 함께 전달한 데이터를 사용할 수 있다.
return data
}
}
}
</script>
...
//부모컴포넌트
export default function Parent () {
const [state, setState] = useState("")
const handleState = (data) => {
setState(data)
}
return (
<>
<Child handleState={handleState} />
</>
)
//자식컴포넌트
export default function Child ({ handleState }) {
...
return (
<>
<div onClick={(data) => handleState(data)}>
...
</div>
</>
)
handleState{data}
와 같이 직접 입력하면 ‘함수실행결과’가 전달되어 에러가 난다. 위 예시와 같이 익명함수를 하나 만들어서 해결해야 한다.