[Vue-21]부모와 자식의 연결고리, Custom Event와 Event Bus

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js

여러분이 vue를 쓰면서 경우에 따라서는 직접 이벤트를 만드는 경우도 있다.

즉 특정 컴포넌트에서 일어난 사건을 그 부모컴포넌트에서는 이벤트라고 인식하는 것이다.

이렇게 Vue에서는 이벤트를 만들 수있고 이렇게 만든 이벤트를 custom event라고 한다.

또한 우리는 vue8장 포스팅에서 이벤트를 어떻게 사용해야하는지 배웠다.

이벤트는 @를 붙혀서 사용하게 된다.

사실 이 때까지 여러분에게 말 않한게 있다.

@가 붙은 모든 이벤트는 사실 custom 이벤트이다.

????라고 생각할 수 있다.

이 때까지 onclick같은 이벤트를 vue문법답게 사용하기 위해서 @를 붙혔다고 생각하는 사람들이 많다.

하지만 정확하게 말하면 onclick같은 이벤트를 vue에 맞게 포팅한거라고 봐야한다.

예를들어 여러분은 v-bind:onclick같은 방식으로도 이벤트를 바인딩할 수 있다.

하지만 이는 @click과는 엄연히 다르다. 그 이유는 여러분이 몇번 해보다보면 알게 될것이며

결론 부터 말하자면 @를 붙혀서 이벤트를 사용하는게 낫다.

약간 새긴했는데 이정도는 좋은 정보니까 언급해주는게 좋을것같다.

그리고 여러분이 이벤트를 만드는 이유는 크게보면 2가지라고 할 수 있다.

1.부모에게 자식이 데이터를 던지기 위해서

2.부모에게 자식이 변화된 시점을 알리기 위해서

1번을 원한다면 여러분인 이미 v-model이라는 좋은것을 vue 12장과 vue 20장을 통하여 배웠다.

물론 v-model은 용도가 조금 다르다.

하지만 v-model로도 1번과 같은 행동을 할 수 있다는것은 알 것이다.

하지만 2번용도도 매우 중요하다.

특정 변화를 트리거로해서 일을 벌린다면 이는 custom event밖에 없다.

이렇게 커스텀 이벤트를 통해서 만들어 놓은 통로, 혹은 커스텀 이벤트 자체를 이벤트 버스라고 부른다.

예제를 통해서 보도록하자.

<!--App.vue-->
<template>
    <div id="app">
        <Person v-model="person" :isAlive="isAlive" @deadEvent="onDeadEvent"></Person>
        isAlive : {{isAlive}}
    </div>
</template>

<script>
    import Person from "./components/Person";

    export default {
        name: 'App',
        components: {Person},
        data() {
            return {
                person: {
                    name: 'kukaro',
                    age: 26
                },
                isAlive: true
            }
        },
        methods:{
            onDeadEvent(isAlive){
                this.isAlive = isAlive;
            }
        }
    }
</script>

<style scoped>
    .result {
        padding: 5px;
        background-color: yellowgreen;
    }
</style>

App.vue에서는 커스텀 이벤트 deadEvent를 받는다.

<Person v-model="person" :isAlive="isAlive" @deadEvent="onDeadEvent"></Person>

onDeadEvent(isAlive){
    this.isAlive = isAlive;
}

여기서 Person은 deadEvent라는 커스텀 이벤트가 발생할 것이고 그게 일어난다면 우리는 isAlive를 변동하여 줄 것이다.

<!--Person.vue-->
<template>
    <div class="person">
        name : {{name}}<br>
        age : {{age}}<br>
        isAlive: {{isAlive}}
    </div>
</template>

<script>

    export default {
        name: 'Person',
        props: {
            isAlive: {}
        },
        data() {
            return {
                name: 'kukaro',
                age: 26,
            }
        },
        created: function () {
            setTimeout(() => {
                this.$emit('deadEvent', false);
            }, 3000);
        },
        methods: {},
        computed: {}
    }
</script>

<style scoped>
    .person {
        padding: 10px;
        background-color: skyblue;
    }
</style>

Person에서 자세히볼 부분은 단 한 개이다.

created: function () {
    setTimeout(() => {
        this.$emit('deadEvent', false);
    }, 3000);
},

this.$emit('<이벤트 명>', <전달해줄값1>, <전달해줄값들2>, ...)

emit은 이벤트를 발생시킨다.

그리고 값역시 전달하게 된다.

실행을 시켜보면 3초뒤에 person의 isAlive는 dead가 되고 그게 부모에게 전달되서 부모의 값도 바뀌게 된다.

이렇게 자식이 부모에게 값을 전달하는건 아주 중요하고 현실적으로 이런 구조를 만드는 것은

1.v-model로 값을 바인딩

2.이벤트 버스로 값을 전달

3.vuex사용

4.js class만들어서 값을 공유해서 사용

같은 방식이 있다. 다 장단점이 존재하는데 4번은 되도록 쓰지말도록하자.

여러분은 모든 방식을 이제 알고 있으므로 여러분의 상황에 맞게 사용해주면 좋을 것이다.