Skip to content
logo
Padosum Wiki
Github
On this page

컴포넌트 통신

수정하기
문서 생성 2021-04-26 14:03:12 최근 수정 2021-05-13 22:51:08
On this page

개요

뷰 컴포넌트는 각각 데이터를 관리하기 때문에 서로 공유하려면 규칙을 따라야 한다.

  • props 속성, 이벤트 전달 방식을 이용해야 한다.

컴포넌트 통신 규칙이 왜 필요할까?

  • N방향 데이터 통신을 할 경우 추적이 힘들다. (MVC 모델에서의 문제점) 하지만 컴포넌트 통신 규칙이 있는 경우 위에서 아래로 전달되기 때문에 데이터 흐름을 추적할 수 있다.
  • 내려가는 것은 데이터 (Props)
  • 올라가는 것은 이벤트 (Event)

props 속성

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


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let appHeader = {
                template: '<h1>{{propsdata}}</h1>',
                props: ['propsdata']
        }


        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader
            },
            data: {
                message: 'hi'
            }
        })
    </script>
</body>
  • Root 컴포넌트의 data를 변경하면 하위 컴포넌트의 props 데이터도 똑같이 변경된다 → Reactivity

event emit

  • 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올리는 것 → event emit
    • 검색해보니 emit의 뜻은 방출하다였다. 
<body>
    <div id="app">
        <app-header v-on:pass="상위 컴포넌트의 메서드 이름"></app-header>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass')
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader
            }
        })
    </script>
</body>
  • 버튼을 클릭했을 때 passEvent라고 하는 메서드를 정의
  • vue.js 개발자도구에 있는 Events 탭에서 event emit에 대한 log를 확인할 수 있다.

event emit을 받고 할 수 있는 것

<div id="app">
    <h1>{{ num }}</h1>
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:add="logNumber"></app-content>
</div>
let appHeader = {
    template: '<button v-on:click="passEvent">click me</button>',
    methods: {
        passEvent: function() {
            this.$emit('pass')
        }
    }
}


let appContent = {
    template: '<button v-on:click="addNumber">Add</button>',
    methods: {
        addNumber: function() {
            this.$emit('add')
        }
    }
}
new Vue({
    el: '#app',
    components: {
        'app-header': appHeader,
        'app-content': appContent,
    },
    methods: {
        logText: function() {
            console.log(`hi`);
        },
        addNumber: function() {
            this.num = ++this.num;
        },
        data: {
            num: 10
        }
    }
})
  • pass라는 이벤트가 아래에서 올라왔을 때 받은 곳에서 logText라는 메서드를 실행한다.

뷰 인스턴스에서 this

  • this는 기본적으로 뷰 인스턴스를 가리킨다.

같은 컴포넌트 레벨 간 통신

  • 같은 레벨의 컴포넌트끼리 바로 통신이 되지 않아 상위 컴포넌트로 전달(event) 후 전달하고 싶은 컴포넌트로 전달(props)한다.

Reference

LINKS TO THIS PAGE

Tags