Level 1. 컴포넌트 통신 방법

728x90

뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서, 컴포넌트 간에 데이터를 주고 받기 위해선 아래와 같은 규칙을 따라야 합니다.

상위에서 하위로는 데이터를 내려줌, 프롭스 속성
하위에서 상위로는 이벤트를 올려줌, 이벤트 발생

컴포넌트 통신 규칙 방식을 통하여서 컴포넌트 간의 데이터 흐름을 손쉽게 확인할 수 있기 때문이다.

props 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
        <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: ['propsdata']
        }
        var appContent = {
            template: '<div>{{ propsdata }}</div>',
            props: ['propsdata']
        }
        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            },
            data: {
                message: 'hi',
                num: 10
            }
        })
    </script>
</body>
</html>

event emit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ num }}</p>
        <!-- <app-header v-on:하위 컴포넌트 에서 발생한 이벤트 이름="상위 컴포넌트의 메소드 이름"></app-header> -->
        <app-header v-on:pass="logText"></app-header>
        <app-content v-on:plus="plusNumber"></app-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">Click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }
        var appContent = {
            template: '<button v-on:click="addNumber">add</button>',
            methods: {
                addNumber: function(num) {
                    this.$emit('plus');
                }
            }
        }
        new Vue ({
            el: '#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            },
            methods: {
                logText: function(){
                    console.log('hi');
                },
                plusNumber: function(num) {
                    this.num += 1;
                }
            },
            data: {
                num: 10
            }
        });
    </script>
</body>
</html>

뷰 인스턴스에서의 this

this 관련 글 1

this 관련 글 2

728x90

저작자표시 비영리 변경금지

'Vue.js' 카테고리의 다른 글

Level 1. 개발 환경 설정 (0)	2020.12.28
Level 1. Vue.js 소개 (0)	2020.12.28
Level 1. 인스턴스 (0)	2020.12.28
Level 1. 컴포넌트 통신 방법 - 응용 (0)	2020.12.28
Level 1. 컴포넌트 (0)	2020.12.28