[Age of Vue] Vue.js 시작하기

📕 Language/Vue

[Age of Vue] Vue.js 시작하기 - 15.props 실습

a n u e 2022. 5. 2. 22:50

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--
            <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
        -->
        <app-header v-bind:propsdata="message"></app-header>
        <!-- 컴포넌트의 props명 바인딩해주고, 상위 컴포넌트의 속성 값을 적어준다 -->
        <app-content v-bind:propsdata="num"></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template : '<h1>{{ propsdata }}</h1>' ,
            //아래에서 받을 props 이름 지정
            props : ['propsdata']
        }
        var appContent = {
            template : '<div>{{ propsdata }}</div>' ,
            //아래에서 받을 props 이름 지정
            //다른 명칭을 사용하여도 되고, 각 범위에서 유니크하게 적용되기 때문에
            //다른 컴포넌트와 props명이 동일해도 관계없다.
            props : ['propsdata']
        }
        new Vue({
                el : '#app' ,
                components : {
                    'app-header' : appHeader,
                    'app-content' : appContent
                },
                data : {
                    message : 'hi',
                    num:10
                }
            })
    </script>
</body>
</html>

app-content 컴포넌트에 Root 컴포넌트의 num값이 바인딩되어 내려옴

Root 컴포넌트에서 지정한 속성 값이 바뀌면 (ex: num, message)

자동으로 자식 컴포넌트의 값도 바뀐다.

이것이 바로 Vue의 Reactivity