props 설정후 사용하기 : camelCase 와 kebab-case

props 를 정의할때는 camelCase

props 를 사용할때는 kebab-case 

 

또한, props 를 설정하였다면 사용하기위해
반드시 setup(props) 와 같이 인자로 props 를 넘겨야한다.

<!-- Child.vue -->

<template>
    
    <div :style="state.color">Hello World</div>

</template>

<script>

    export default {

        props : {
            
            // camelCase 로 작성하지만, 사용할때는 kebab-case 로..
            textColor : { type: String, default : 'red'} 

        },
        
        setup(props) {

            const state = {

                color : { color : props.textColor }

            }

            return { state }


        }
        
    }

</script>

로 정의후..

<!-- App.vue -->

<template>

    <child text-color="blue"/>

</template>

<script>

    import Child from './Child.vue'

    export default {
        
        components : { Child }

        
    }

</script>

에서 사용.