props 속성

<div id="app">
    <!-- 컴포넌트 표시 -->
    <app-header v-bind:프롭스이름="상위컴포넌트의 데이터이름"></app-header>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                appTitle: '프롭시 넘기기'
            }
        },
        //인스턴스 옵션 속성 - 옵션
        components: {
            // '컴포넌트 이름' : 컴포넌트 내용
            'app-header' : {
                template: '<h1>컴포넌트 등록</h1>',
                props: ['title']
            }
        }
    }).mount('#app');
</script>

1) 상위 컴포넌트에서 하위컴포넌트로 데이터를 내려보낼 떄 사용하는 것은 props이다.

- 정확히는 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법이다.

 

먼저 컴포넌트 안에 template와 같은 레벨에 props를 작성해 준다.

- template : 그릴 화면

- props: 상위에서 받은 매개변수 

정도로 생각해면 될 것 같다.

<div id="app">
    <!-- 컴포넌트 표시 -->
    <app-header v-bind:title="appTitle"></app-header>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                appTitle: '프롭스 넘기기'
            }
        },
        //인스턴스 옵션 속성 - 옵션
        components: {
            // '컴포넌트 이름' : 컴포넌트 내용
            'app-header' : {
                template: '<h1>{{title}}</h1>',
                props: ['title']
            }
        }
    }).mount('#app');
</script>

 

디렉티브 v-bind를 이용해서 :props 즉 연결할 props의 이름을 적용해주고 그 값을 ="appTitle"로 담아준다. #app 내부의 데이터를 보내주고 있는 것이다.

 

그리고 확인해보면 

1) Vue.createApp() 인스턴스를 생성하며 내부에 components에 props로 값을 보내주며 그 값을 template 내에서 사용할 수 있게 된다.