props & emit

props

• 자식 컴포넌트에서 부모 데이터값을 사용해야 할 때 사용
• 배열 방식으로 여러개를 받을 수도 있다.
• 단, props로 받은 데이터 값은 변경할 수 없다.
• 부모 컴포넌트에서 자식 컴포넌트로 데이터 넘겨주기 예)

<template>
	<Sun
    	:info = info />		// :자식에서 사용할 변수명(:info) = 부모에서 사용할 변수명(info)
</template>

<scipt #setup>
import { ref } from 'vue';
import Sun from './components/props/Sun.vue';	// 자식 컴포넌트 import

// 자식에서 사용할 변수 생성
const info = ref({
	'name' : '전재준',
    'age' : 20
});


</script>

 

emit / emits

• 자식 컴포넌트에서 부모 function을 사용해야 할 때