VUE 자식컴포넌트에서 부모 컴포넌트로 값 전달하기

할때마다 헷갈리는 자식 컴포넌트에서 부모 컴포넌트로 값 전달하기 그제했는데 또 헷갈려서 검색하는걸 보고 절레절레하고 적기로했다🤦🏻‍♀️

 

<부모 컴포넌트>

<child-component @callParent="alertFunc"></child-component>
.
.
.
.
.

<script>
	export default{
    	name:'parent-component',
        methods: {
        	alertFunc(val){
            	alert(val);
            }
        }
    }
</script>

 

<자식 컴포넌트>

.
.
.
<div @click="sendToParent"></div>
.
.
.
<script>
	export default{
    	name: 'child-component',
        method:{
        	sendToParent(){
            	this.$emit('callParent', '부모 컴포넌트로 값 전달완룡');
            }
        }
    }
</script>

 

이렇게하면 부모 컴포넌트로 값이 전달되어 alert이 출력된다 :)

 

(이거쓰면서도 적어놓은거 참고한거 안비밀ㅠㅠ)

 

 

출처

구글 친구들 🙇🏻‍♀️