홍준혁

Vue.js-하위에서 상위 컴포넌트로 데이터 전달 본문

Vue.js

Vue.js-하위에서 상위 컴포넌트로 데이터 전달

홍준혁 [Hong-JunHyeok] 2020. 9. 21. 17:53
728x90

 

공식 뷰 사이트에서는 하위에서 상위로 데이터를 전달하는 것을 권장하지는 않는다.

왜냐하면 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문이다.

그래도 배워보자 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <child-component v-on:show-log="printText"></child-component>
        </div>
        <script>
            Vue.component("child-component", {
                template: "<button v-on:click='showLog'>show</button>",
                methods: {
                    showLog: function () {
                        this.$emit("show-log");
                    },
                },
            });

            var app = new Vue({
                el: "#app",
                data: {
                    message: "Hello Vue!",
                },
                methods: {
                    printText: function () {
                        console.log("received event");
                    },
                },
            });
        </script>
    </body>
</html>

 

보면 상위에서 하위로 전달하는 데이터 전달 방식과는 조금 다른 모습을 볼 수 있다.

 

먼저 하위 컴포넌트에서 버튼이 클릭되면 v-on:click이라는 이벤트가 발생하는데 그 이벤트가 발생하면 showLog라는 

함수를 실행하게 되어있다.

이때 showLog를 실행하면 emit이 실행이 되는데 그러면 div#app에서 이벤트가 발생한다. 그럼 emit 이벤트가 발생하였을때 실행하는 함수는 printText인데 그렇게 되면 received event가 출력되는 모습을 볼 수 있다.

 

처리되는 과정을 정리해보면 ...

 

  1. [show]버튼을 클릭하면 클릭이벤트 v-on:click="showLog"에 따라 showLog함수가 실행이 된다.
  2. showLog()메서드 안에 this.$emit('show-log')가 실행되면서 show-log이벤트가 발생을 한다
  3. show-log이벤트는 <child-component>에 정의한 v-on:show-log에 전달되고 v-on:show-log의 대상 메서드인 최상위 컴포넌트의 메서드 printText()가 실행된다.
  4. printText()는 received event라는 로그를 출력하는 메서드 이므로 마지막으로 콘솔에 로그가 출력된다.

 

 

728x90

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

Vue.js-네스티드 라우터  (0) 2020.09.21
Vue.js-Router(뷰 라우터)  (0) 2020.09.21
Vue.js 상위-하위 컴포넌트 데이터 전달  (0) 2020.09.21
Vue.js-watch속성  (1) 2020.09.14
Vue.js-computed  (1) 2020.09.14
'Vue.js' Related Articles more
Comments