[Vue 3] Vue props, emit 사용방법

 

props

위에서 아래로 정보를 보낼 때 사용한다.

<div v-for="i in children">
<BusinessCardDetail  v-if="'i.name'!=undefined"
object:BusinessCards :name="i.name" :title="i.age" :indexx=i.balance
@delete-card-event="deleteCardEventt" />
</div>

 

이렇게 인자들을 BusinessCardDetail.vue에 넘겨주면

 

BusinessCardDetail.vue에서는 

const props = defineProps({
   name : String.
   title : String,
   indexx = Number,
})

 

이렇게 각각의 인자들의 타입명을 지정해줘야한다.

 

이때 만약 객체배열 자체를 받아서 쓰고 싶다면

<ChildPage v-for="i in children" :person="i"
@update-balance="updateBalance"/>

 

각각의 ChildPage에는 i 라는 chidren 객체 배열의 인자들이 들어갈 것이기에

:person="i" 로 보내고

 

<script setup>
const props = defineProps({
   person : Object,
})
</script>

 

:person ( 받은 곳에서 사용할 이름 )

person으로 받아서                                                                                                                                                                                                                             

<p>
이름 : {{ person.name }}
</p>
<p>
나이 : {{ person.age}}
</p>
<p>
용돈 : {{ person.balance }}
</p>

                                                                                                                                                                                                  요로코롬 맛있게 사용하면 된다.                                                                                                                                                                                                                       

 

emit

정보를 변경하는 담당은 부모에서 하고 자식에서 정보의 변경을 처리하려한다면

자식에서 정보를 변경하는 것이 아닌, 이 부분 변경해주세요 라는 요청을 보내서 부모측에서 정보를 변경해야한다,

그렇기에 emit을 사용한다

 

emit 사용법

emit을 선언하는 방법은 여러가지가 있지만 아래의 방법이 권장된다.

const emit = defineEmits(['updateBalance'])

const giveMeAllowance = function(){
emit('updateBalance',props.person)
}

 

emit을 defineEmits로 선언하고 사용해야하는 emit이 추가로 생긴다면

const emit = defineEmits(['updateBalance' , 'anotherevent'])

와 같이 추가해서 사용한다.

 

그럼 현재 Vue를 참조하는 Vue들에 updateBalance 라는 이벤트를 보낼 수 있다.

주의 : giveMeAllowance와 같은 함수명이 아니다.

 

그리고 부모 Vue에서 사용하는 방법은 아래와 같다.

<template>
<div>
    <h1>부모 페이지 입니다</h1>
</div>
<ChildPage v-for="i in children" :person="i" @update-balance="updateBalance"/>
</template>

 

 

 updateBalance 는 케밥케이스로 치환하여 @update-balance로 작성한다.

그럼 뒤의 ="updateBalance" 는 무엇인가

바로 부모 페이지의 실행시킬 메서드 명이다.

앞의 인자 = 자식 관련

뒤의 인자 = 현재 페이지 관련

으로 이해하면 좋을 것 같다.