Level 1. 컴포넌트 통신 방법

728x90

같은 컴포넌트 레벨 간의 통신 방법

AppContent에서 AppHeader로 직접 전달을 할 수 없기 때문에

AppContet에서 Root로 먼저 전달 후 Root에서 AppHeader로 전달을 한다.

<!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:propsdata="num"></app-header>
        <app-content v-on:pass="deliverNum"></app-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<div>{{ propsdata }}</div>',
            props: ['propsdata']
        }
        var appContent = {
            template: '<div><button v-on:click="passNum">pass</button></div>',
            methods: {
                passNum: function() {
                    this.$emit('pass', 10);
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            },
            data: {
                num: 0
            },
            methods: {
                deliverNum: function(value) {
                    this.num = value;
                }
            }
        })
    </script>
</body>
</html>

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