Props & Emit

Props

설명

🔖 부모Component 값(전송)을 자식Component(출력)에게 전달해줄때 사용

사용법

• defineProps()에 전달하는 인자는 props 옵션에 제공하는 값(읽기 전용)과 동일
• 두 선언 스타일은 동일한 props 옵션을 사용

• 부모에서 자식에게 데이터 넘기기

<script setup>
let testData = '하위컴포넌트로 보낼 데이터';
</script>

<template>
	<TestBlock :data="testData"> </TestBlock> <!--데이터 바인딩 -->
</template>

• 자식에서 부모 데이터 출력하기

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  data: String
});
</script>

<template>
  <h3> {{ props.data }} </h3>
</template>

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>

• 부모에서 자식 데이터 출력하기

<script setup>
const parents = (data) => {
    // 실행할 내용 입력
    console.log(data);
}
</script>

<template>
	<!-- child로 데이터가 넘어오면 parents 함수 실행 -->
  <TestBlock @child="parents"> </TestBlock>
</template>