자식이 부모데이터 바꾸고 싶으면 custom event

애플코딩 - 뷰 강의

 

자식에서는 부모의 state를 변경할 수 없다 (read-only)

그래서 custom event를 통해 수정해달라는 메세지를 보내야 한다.

 

vue에서 지원하는 변수가 있는데 $가 붙은 변수이다.

 

$emit('작명',데이터) 형식으로 보내는데 데이터를 보내지 않으려면 $emit('작명')으로도 충분하다.

 

하위컴포넌트(자식)

        <h4 @click="$emit('openModal')">{{ 원룸.title }}</h4>

이렇게 작명해서 메세지를 보내면

  <Card @openModal="모달창열렸니 = true" v-for="(a,i) in 원룸들" :원룸="원룸들[i]" :key="i"/>

이렇게 작명한 메세지를 이벤트로 발생시킬 수 있다. 이게 자식이 부모의 state를 변경하는 방식이며,

이것은 Custom Event 작성 방식으로 볼 수 있다.

 

만약

$emit('작명',데이터)로 데이터도 보내서 사용해야 한다면

  <Card @openModal="모달창열렸니 = true; 누른거= $event" v-for="(a,i) in 원룸들" :원룸="원룸들[i]" :key="i"/>

 

$event 해당 값을 사용할 수 있다.

 

    <template>  

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

      
    </template>
      
    <script>
    export default {
        name : "Card",
        props : {
            원룸 : Object,
        },
        methods : {
            send (){
                this.$emit('openModal',this.원룸.id);
            }
        }
    }
    </script>

 

이렇게 함수로도 만들 수 있다.