Vue.js Props와 Event bus에 대하여 알아보기

오늘은 Vue.js 자바스크립트 라이브러리에서 통신하는 과정인 Props와 Event bus에 대하여 알아보고자 합니다.

하위 컴포넌트로부터 전송된 이벤트에 의해 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하고, 서로 같은 레벨의 컴포넌트들이 Event bus로 통신하는 과정을 코드로 실습해보려 합니다.

일반적으로 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 보내고, 상위 컴포넌트는 하위 컴포넌트로 props를 보내주면 상하위 컴포넌트들이 이벤트와 데이터를 교류할 수 있습니다.

하지만 같은 레벨의 컴포넌트끼리 데이터를 교류하기 위해서는 Event bus라는 방식을 사용해야 합니다.

CDN 사용하기

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

이미 Node.js를 설정해두었지만 간단한 실습해서는 CDN을 사용하여 vue 인스턴스를 실습해보려고 합니다.

위 스크립트 주소를 html 파일의 body 태그에 삽입하면 됩니다.

props

Vue.component의 props 옵션에 수신할 내용을 명시해주어야 합니다.

그래야 template에서 수신한 props 내용을 가져다가 사용할 수 있습니다.

<body>
    <div id="app1">
        <test v-bind:prop="msg"></test>
    </div>

app1라는 id를 가진 div 태그의 범위가 상위 컴포넌트의 유효범위이고, test라는 이름을 가진 하위 컴포넌트에서 msg를 전달받습니다.

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

위 스크립트 주소를 html 파일의 body 태그에 삽입하면 vue를 적용할 수 있습니다.

    <script>
        Vue.component("test", {
            props: ["prop"],
            template: '<div></div>'
        });

test라는 컴포넌트를 전역으로 등록하면서 props로 상위 컴포넌트에서 값을 받게 준비합니다.

받은 props은 인라인 템플릿으로 출력하게 됩니다.

        new Vue({
            el: "#app1",
            data() {
                return {
                    msg: "hello, child"
                }
            },
        })
    </script>
</body>

상위 컴포넌트에서는 el 옵션으로 유효 범위를 지정하고, 하위 컴포넌트에 건내줄 data를 만들어줍니다.

Event Bus

이벤트를 전송하는 $emit과 이벤트를 감지하는 $on을 이용하여 같은 레벨에 있는 컴포넌트끼리 통신할 수 있습니다.

<body>
    <div id="app">
        <child1></child1>
        <child2></child2>
    </div>

child1과 child2는 서로 같은 레벨로서 Event Bus로 통신하여 데이터를 인자로 넘겨주려 합니다.

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

Event Bus 예제에서도 위 스크립트 주소를 html 파일의 body 태그에 삽입해줍니다.

    <script>
        var bus = new Vue()

새로운 Vue를 생성하여 Event Bus로 사용하게 합니다.

        Vue.component("child1", {
            template: "<p v-on:click = 'sender()'>click</p>",
            methods: {
                sender: function () {
                    bus.$emit('first', 1)
                }
            }
        });

child1이라는 전역 컴포넌트를 등록해주고, sender라는 메소드를 등록해줍니다.

그리고 인라인 템플릿으로 작성된 텍스트에 의해 child1 커스텀 태그의 문자열을 클릭하면 Event Bus의 $emit으로 이벤트를 발생시킵니다.

        Vue.component("child2", {
            template: "<p></p>",
            created() {
                bus.$on('first', function (data) {
                    console.log(data);
                })
            },
        });

child2이라는 전역 컴포넌트를 등록해주고, 라이프 사이클 중 created에 의해 Event Bus의 $on으로 이벤트를 수신합니다.

        new Vue({
            el: "#app"
        });
    </script>
</body>

Vue앱을 만들기 위한 Vue 인스턴스를 생성합니다.

Written on February 15, 2019