Vue.js

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

Dave Song 2023. 8. 23. 21:54

<!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">{{str}}
       // v-bind: 
        <app-header v-bind:propsdata ="num"></app-header>
        // v-on: 하위컴포넌트에서 발생한 event이름
        <app-content v-on:pass="deliverNum"></app-content>
    </div>
   
    //appComponent에서 appHeader로 데이터 보내는 실습
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
   
    //root 아래 component
    var appHeader = {
        template: '<div>header</div>',
        props: ['propsdata']
    }
    
    //root 아래 component
    var appContent = {
        // 클릭하면 passNum이라는 메서드 실행
        template: '<div>content<button v-on:click="passNum">pass</button></div>'
        ,methods:{
            passNum: function(){
                //emit으로 event 수행
                this.$emit('pass',10);
            }
        }
   
    }
   
    //root Component
    new Vue({
            el: '#app'
            ,components:{
                'app-header': appHeader
                ,'app-content' : appContent
            },
            data:{
                num: 0
            },
            methods:{
                deliverNum: function(value){
                    this.num = value;
                }
            }
        })
    </script>
   
</body>
</html>