코딩하는 둥둥

[ Vue.js 시작하기 ] 05. 컴포넌트 통신 방법 - 응용 본문

Frontend/Vue.js 시작하기 - Age of Vue.js

[ Vue.js 시작하기 ] 05. 컴포넌트 통신 방법 - 응용

둥둥 2022. 9. 26. 16:35
728x90
inflearn에서 수강 한 장기효(캡틴판교)님의 강의🔗정리입니다.

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

  • 같은 레벨인 AppContent에서 AppHeader로 바로 전달할 수 없기때문에 event와 props를 이용해 데이터를 전달한다.
  • Root에서 props를 이용해서 AppHeader로 데이터를 내리기위해서는 data(num)를 선언해야 한다.
  • 내려진 num을 AppHeader는 propsdata로 받는다.
AppContent → Root : Event
<body>
    <div id="app">
        <app-header></app-header>
        <app-content></app-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
        var appHeader = {
            template: '<div>header</div>'
        }

        var appContent = {
            template: '<div>content<button v-on:click="passNum">pass</button></div>', // pass라는 버튼을 누르면 content에 있는 값이 header로 이동
            methods: { // pass라는 버튼을 눌렀을때 신호를 발생시킴
                passNum: function(){
                    this.$emit('pass', 10);  
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            }
        });
    </script>
</body>

app-content에 속해있는 pass버튼을 클릭시 개발자 도구의 Vue의 event 탭에서 event가 발생하면서 params(인자)가 10이 들어오는것을 확인 할 수 있다.

Root → AppHeader : props
<body>
    <div id="app">
        <app-header v-bind:propsdata="num"></app-header> <!-- 프롭스 속성 이름 : propsdata | 상위컴포넌트의 데이터 이름 : num -->
        <app-content v-on:pass="deliverNum"></app-content> 
                <!-- v-on을 이용해서 pass라는 event받음. 상위컴포넌트인 Root의 메소드 수행
                 → deliverNum 메소드 안에 value가 별도로 선언하지 않아도 암묵적으로 전달이 된다 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
        var appHeader = {
            template: '<div>header</div>',
            props: ['propsdata'] // 프롭스 속성 이름
        }

        var appContent = {
            template: '<div>content<button v-on:click="passNum">pass</button></div>', 
            methods: { 
                passNum: function(){
                    this.$emit('pass', 10); 
                }
            }
        }

        new Vue({ // 상위 컴포넌트(Root) = 인스턴스
            el: '#app',
            components: {
                'app-header': appHeader,
                'app-content': appContent
            },
            data: {
                num: 0
            },
            methods: {
                deliverNum: function(value){ // event로 넘어온 인자(10)는 받는쪽에서 (value)로 정의할 수 있다.
                this.num = value; // 0이던 num의 값을 10으로 변경
                }
            }
        });
    </script>
</body>
  1. v-on을 이용해 passNum이라는 이벤트를 받아 pass 버튼을 클릭하면 content에 있는 값이 header로 이동하도록 한다.
  2. 상위컴포넌트인 컴포넌트에 메소드를 추가한다. 이때 event로 넘어온 인자는 받는쪽에서 (value)로 정의할 수 있다.
  3. props를 사용해 num이라는 데이터를 에 전달한다.

pass 버튼을 클릭시 에 있던 num: 10이 인스턴스로 올라가서 props로 컴포넌트로 이동한 것을 확인 할 수 있다.

728x90

'Frontend > Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글

[ Vue.js 시작하기 ] 06. 라우터  (0) 2022.09.26
[ Vue.js 시작하기 ] 04. 컴포넌트 통신 방법 - 기본  (0) 2022.09.26
[ Vue.js 시작하기 ] 03. 컴포넌트  (0) 2022.09.26
[ Vue.js 시작하기 ] 02. 인스턴스  (0) 2022.09.15
[ Vue.js 시작하기 ] 01. Vue.js 소개  (0) 2022.09.15
'Frontend/Vue.js 시작하기 - Age of Vue.js' Related Articles more