.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
Props
설명
부모Component 값(전송)을 자식Component(출력)에게 전달해줄때 사용
사용법
•
defineProps()에 전달하는 인자는 props 옵션에 제공하는 값(읽기 전용)과 동일
•
두 선언 스타일은 동일한 props 옵션을 사용
•
부모에서 자식에게 데이터 넘기기
<script setup>
let testData = '하위컴포넌트로 보낼 데이터';
</script>
<template>
<TestBlock :data="testData"> </TestBlock> <!--데이터 바인딩 -->
</template>
HTML
복사
•
자식에서 부모 데이터 출력하기
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
data: String
});
</script>
<template>
<h3> {{ props.data }} </h3>
</template>
HTML
복사
Emits
설명
자식Component 값(전송)을 부모Component(출력)에게 전달해줄때 사용
사용법
•
defineEmits()에 전달하는 인자는 emit 옵션에 제공하는 값(읽기 전용)과 동일
•
두 선언 스타일은 동일한 emits 옵션을 사용
•
자식에서 부모에게 데이터 넘기기
<script setup>
// 하위컴포넌트에서 상위컴포넌트로 데이터 보내기
const test = '테스트 데이터임!!';
const emit = defineEmits(['child']);
const testBtn = () =>{
emit('child', test); // 전송
}
</script>
<template>
<button @click="testBtn"> </button> <!-- 함수 호출 버튼 -->
</template>
HTML
복사
•
부모에서 자식 데이터 출력하기
<script setup>
const parents = (data) => {
// 실행할 내용 입력
console.log(data);
}
</script>
<template>
<!-- child로 데이터가 넘어오면 parents 함수 실행 -->
<TestBlock @child="parents"> </TestBlock>
</template>
HTML
복사
