일반적으로 자식 컴포넌트에서 부모컴포넌트의 state를 변경시킬 순 없다.
부모 컴포넌트에서 받은 값은 read-only이기 때문이다.
따라서 custom event를 통해 자식에서 부모컴포넌트로 이벤트를 전달해서 값을 수정해야 한다.
다시 말해 자식컴포넌트에서 props값을 변경시키는 것이 아니라 부모한테 이벤트를 전달해서 부모 컴포넌트 내 state를 변경시켜야 한다.
$emit('보낼이벤트의이름', 데이터) // 보낼 데이터가 없으면 그냥 $emit('보낼이벤트의이름') 로 보내도 된다.이런 느낌으로 보내주면 된다.
// 자식 컴포넌트 ModalTest.vue
<template>
<div>
<h4 @click="$emit('openModal', 1)">
이걸 클릭하면 부모 컴포넌트에서 이벤트 발생
</h4>
<div>{{ roomInfo.price }}원</div>
</div>
</template>
<script>
export default {
props: {
childInfo: Object,
},
components: {},
data() {
return {
props: "",
};
}
};
</script>// 부모 컴포넌트
<template>
<div>
<ModalTest @openModal="isModalOpen=true" />
</div>
</template>
<script>
import ModalTest from "@/components/ModalTest.vue";
export default {
name: "App",
data() {
return {
isModalOpen: false,
},
components: {
ModalTest,
},
methods: {
},
};
</script>위에 코드를 보면 자식컴포넌트에서 보낼 이벤트의 이름으로 openModal로 지정하였다.
그럼 부모컴포넌트에서 @openModal로 이벤트를 수신할 수 있다.
<ModalTest @openModal="isModalOpen=true" />
여기에서는 openModal 이벤트가 발생했을 때 isModalOpen의 값을 true로 넣는 것으로 실행하였다.
파라미터를 받고 싶다면 다음과 같이 파라미터를 받을 수 있다.<ModalTest @openModal="(param) => {isModalOpen=true"; console.log(param} />
아니면<ModalTest @openModal="isModalOpen=true"; console.log($event} />
다음과 같이 $event를 통해 파라미터 값을 받을 수도 있다.
다시 정리하자면..
1. 자식컴포넌트에서 $emit('이벤트명', 전달값) 을 이벤트 핸들러(ex. click)에 넣는다.
2. 부모컴포넌트에서 @이벤트명 을 통해 전달값을 수신받아 메소드를 실행시킨다.
끝!
+
- 자식 컴포넌트에서 변경된 값을 부모컴포넌트에서 실시간으로 확인하고 싶다면 ref 속성을 활용하는 방법도 있다.
하지만 state가 이곳저곳에 있으면 관리하기 번거로워지므로 자식컴포넌트의 state는 가급적 부모컴포넌트에서 관리하는 것이 좋다고 함
