$emit

자식컴포넌트에서 부모컴포넌트로 보내는 신호 $emit

// User.vue (부모)

<UserEdit : // 값들을 props로 전달
	:name="name"
	:address="address"
    :phone="phone"
    :hasDog="hasDog"
   ></UserEdit>
   
   
// UserEdit.vue (자식)
<template>
	<v-text-field // Vuetify에서 제공하는 text필드를 받고
		label="Ragular" // input 위에 작성하는 label과 같은 역할
        v-model="name" // 부모에게 상속받은 name값을 불러와서 수정하려고하면
    ></v-text-field>  // 오류가 발생한다.
</template>

위와 같은 오류 발생 시에는
그 값을 자식컴포넌트 내에서 가공한 이후에 그 가공된 값을 텍스트필드에 넣어주어야한다.
자식컴포넌트 내에 User라는 오브젝트를 만들어주고, create를 이용해서 받아온 props를
이 컴포넌트가 생성될 때 UserEdit 컴포넌트 내에있는 User 오브젝트에 그 값들을 넣어서 사용해보겠습니다.


<script>
export default {
    props : ["name", "address", "phone", "hasDog"],
    data (){
        return {
            user: {} // user obj 생성
        }
    },
    created() { // props 가 넘어왔을 때 이 컴포넌트가 생성될 때 props 안에 있는 값들을 user obj 에 넣어주겠습니다.
        this.user.name = this.name // user obj 내에 새롭게 할당
        this.user.address = this.address
        this.user.phone = this.phone
        this.user.hasDog = this.hasDog
    }
}
</script>

부모 컴포넌트 내에서 자식컴포넌트로 props 를 통해서 name 이라는 값을 전달했다.

이 name을 자식컴포넌트 내에서는 자기의 데이터를 user라는 오브젝트 내에 집어넣었고,

user.name 이라는 값을 텍스트 필드에 연결하였습니다. 그래서 텍스트 필드 안에 있는

name의 값을 아무리 수정해도 오류가 발생하지 않습니다.

<template>
    <div class="yellow lighten-3 pa-3">
        <h3>회원 정보를 수정할 수 있습니다.</h3>
        <p>수정사항</p>
        <v-text-field
            v-model="user.name"
            label="이름"
        ></v-text-field>
        <v-text-field
            v-model="user.address"
            label="주소"
        ></v-text-field>
        <v-text-field
            v-model="user.phone"
            label="전화번호"
        ></v-text-field>
    </div>
</template>

<script>
export default {
    props : ["name", "address", "phone", "hasDog"],
    data (){
        return {
            user: {} // user obj 생성
        }
    },
    created() { // props 가 넘어왔을 때 이 컴포넌트가 생성될 때 props 안에 있는 값들을 user obj 에 넣어주겠습니다.
        this.user.name = this.name // user obj 내에 새롭게 할당
        this.user.address = this.address
        this.user.phone = this.phone
        this.user.hasDog = this.hasDog
    }
}
</script>

hasDog를 설정해주도록 하겠습니다.

Vuetify로 이동하여 Radio 버튼을 가져와보겠습니다.

<v-btn @click="changeUser">수정 완료</v-btn> 


<script>
export default {
    props : ["name", "address", "phone", "hasDog"],
    data (){
        return {
            user: {} // user obj 생성
        }
    },
    created() { // props 가 넘어왔을 때 이 컴포넌트가 생성될 때 props 안에 있는 값들을 user obj 에 넣어주겠습니다.
        this.user.name = this.name // user obj 내에 새롭게 할당
        this.user.address = this.address
        this.user.phone = this.phone
        this.user.hasDog = this.hasDog
    },
    methods : { [!] changeUser() 함수 추가
        changeUser(){
            console.log(this.user)
        }
    }
}
</script>

자식에서 부모에게 신호를 보내는 방법에 대해 작성해보겠습니다.

this.$emit() 이걸 통해서 자식 컴포넌트는 부모 컴포넌트에게 신호를 보낼 수 있습니다.

$emit('child') String 형태로 넣어줘야 합니다.

 

그럼 이제 부모컴포넌트(User.vue)에도 신호를 받는 것을 만들어줘야 합니다.

@child="parents" 만약에 child라는 신호가오면 parents라는 함수를 실행해줘

 

methods : {

    parents() {

       console.log('부모가 받았어')

   }

}

 

methods:{

        parents(){

            // user = {name,address,phone,hasDog}

            this.name = user.name

            this.address = user.address

            this.phone = user.phone

            this.hasDog = user.hasDog

            console.log('받았어')

        }

    }

 

이렇게 parents가 호출되면 자식에서 전송했던 데이터가 user에 있고, this.name = user.name 으로 하게되면 자식에서 작성한 name이 부모의 name으로 변경할 수 있게 된다.