#9. Vue_custom_event

costom event 문법

리엑트에선 자식컴포넌트가 부모 컴포넌트에 영향을 주기 위해 상태끌어 올리기를 하여 약간 복잡하게 느껴집니다. 하지만 뷰는 커스텀 이벤트를 활용해서 엄청 간단하게 데이터를 변경 할 수 있습니다.

1. 자식은 $emit(작명,전달할데이터)

위와같이 자식 컴포넌트에서 부모에게 자료를 전달할 수 있습니다. $emit은 뷰가 제공하는 특별한 함수인데 부모컴포넌트에게 부탁하는 함수라고 생각하면 좋습니다. 전문용어로 커스텀 이벤트 전송이라고 합니다. 간단한 예시는 아래와 같습니다.

<!-- 자식 컴포넌트 -->
<div>
    <h4 @click="$emit('openModal')">{{data.title}}</h4>
</div>

2. 부모는 @작명="데이터변경코드"

위와 같이 하면 아까 1번에서 자식이 요청한 $emit을 전달받아 원하는 데이터를 변경 할 수 있도록 도와 줍니다.

<!-- 부모 컴포넌트 -->
<Card @openModal="isModal = true" />

커스텀 이벤트로 부모에게 자료 보내기

$emit()을 사용할 때 두번째 파라미터에는 원하는 자료를 입력 할 수 있습니다. 그럼 자료가 부모까지 전달이 됩니다. 예를들어 어떤 데이터의 id값들 전달하고 싶을 때 아래와 같습니다.

<!-- 자식 컴포넌트 -->
<div>
    <h4 @click="$emit('openModal', data.id)">{{data.title}}</h4>
</div>

그러면 부모에서 관리한 데이터에 $event로 할당해주면 됩니다.

<!-- 부모 컴포넌트 -->
<Card @openModal="isModal = true; clickModal = $event" />

코드 줄이기

$emit()함수를 쓸때 다소 코드가 길어보여 복잡해 보일 수가 있습니다. 하지만 아래 데이터 보관함에서 메서드를 활용하면 쉽게 코드를 줄일 수가 있습니다.

props:{
        data : Object,
    },
    methods:{
        send(){
            this.$emit('openModal', this.data.id)
        }
    }

위와 같이 메서드를 활용해서 저장이 가능하고 사용할 때 꼭 this를 붙여야 props에 있는 데이터를 가져와서 쓸 수가 있습니다. 그리고 이렇게 위와 같이 메서드 함수를 만들 었다면 아래와 같이 코드를 축약 할 수 있습니다.

<!-- 자식 컴포넌트 -->
<div>
    <h4 @click="send">{{data.title}}</h4>
</div>