[ Vue ] Vue3 defineProps

defineProps

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해 줄 때 사용하는 단방향 데이터 전달 방식입니다.

 

Parent.vue

<script setup>
    import ReadContents from '@/components/read/ReadContents.vue'
    const test = {
        id: 'hello',
        pass: 'world'
    }
</script>

<template>
    <ReadContents :test="test" />
</template>

 

Child.vue

<script setup>
    import { defineProps, onMounted, ref } from 'vue'
    
    const props = defineProps(['test'])
    console.log(props.test) // { id: "hello" pass: "world" }
    
</script>