관리 메뉴

열심히 일한 당신 떠나라

코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 10일차 본문

정보교육/프런트엔드

코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 10일차

@thiskorea 2024. 6. 28. 12:01

7장 컴포지션 API 다루기

7.3 컴포지션 API에서 달라진 컴포넌트 구성 요소

o 라이프사이클 훅

beforeCreate(), created() 가 setup 영역으로 대체함.

beforeMount() -> OnBeforeMount() ... 으로 변경됨.

ㅇprops

<script setup>
const props = defineProps({
    propA: String,
    propB: [String, Number],
    propC: {
        type: Object,
        default: ()=> ({}),
        required: true,
    },
});
</script>

ㅇ emits

<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(evnentNamesArray);
</script>

ㅇ provide

<script setup>
import { provide } from 'vue';
provide('keyForProvidedData', 'some data');
</script>

ㅇ inject

<script setup>
import { inject } from 'vue';
const receiveData = inject('keyForProvidedData', 'default value');
</script>