[Vue] 자식 컴포넌트에서 부모 컴포넌트 데이터 변경(커스텀 이벤트 전송)

자식 컴포넌트 ▶ 부모 컴포넌트 데이터 변경 (커스텀 이벤트 전송)

 

부모에게 메세지를 보낼 때

자식 컴포넌트에서 $emit('작명', '전달할 데이터')를 추가하여 데이터를 변경할 수 있음

<!-- 자식 컴포넌트 -->

<template>
  <div>
    <img :src="a.image" class="room-img">
    <h4 @click="$emit('openModal', i)"> {{a.title}} </h4>
    <p>{{a.price}} 원</p>
   </div>
</template>

 

자식 메세지를 수신할 때

• $event 변수에는 자식 컴포넌트데이터가 담겨있음

<!-- 부모 컴포넌트 -->

<template>
	<Card @openModal="$event"  />
</template>

@작명 = "실행시킬 코드"를 추가하여 동작시킬 수 도 있음

 

자식 컴포넌트에서 함수로 축약하여 보낼 때

<!-- 자식 컴포넌트 -->

<template>
  <div>
    <img :src="a.image" class="room-img">
    <h4 @click="send"> {{a.title}} </h4>
    <p>{{a.price}} 원</p>
   </div>
</template>

<script>
export default {
    methods: {
        send(){
            this.$emit('openModal', this.title.id)
        }
    },
}
</script>

 

methods안에 함수명을 정의하고 해당 html 요소에 함수명을 입력

단 함수로 정의할 때는 this를 붙여줘야 함