vue 컴포넌트 상속

vue에서도 부모-자식 형태의 컴포넌트 생성이 가능하다.

긴 말 없다. 바로 예시 코드를 보자.

Parent.vue

<template>

    <child></child>

</template>

<script>

    import Child from './Child.vue';

    export default {

        name: 'Parent',

        components: {

            Child

        },

        data: function() {

            return {

                parentData: {name:'Mark', age: 10}

            }

        },

        methods: {

        }

    }

</script>

<style></style>

부모 vue 컴포넌트의 코드는 낯이 익은 코드다. 

(http://iam-song.tistory.com/46?category=703225 참고)

부모에서는 자식 컴포넌트를 가져왔고,

components에 사용할 컴포넌트라 선언을 하고 

template에도 선언해 주었다.

Child.vue

<template>

    <p>{{mention}}</p>

    <!-- <p>{{parentData.name}}</p>

    <p>{{parentData.age}}</p> -->

</template>

<script>

export default {

        name: 'Child',

        components: {

            Child

        },

        data: function() {

            return {

                mention: 'I am child!'

            }

        },

        methods: {

        }

    }

</script>

<style></style>

Child.vue 코드도 그닥 다를 것이 없다. 

그.런.데.!. 

부모의 data 값을 자식에게 어떻게 넘겨줄 것인가? 

여기서 부터가 다른점!

- 부모의 데이터 자식에게 전달하기 

경험 상, 부모 코드 부터 보는 것 보다 자식 코드 부터 보는게 이해하기 편했어서...

자식 코드부터 보잣!

Child.vue

<template>

    <p>{{mention}}</p> // I am child!

    <p>{{parentData.name}}</p> // Mark

    <p>{{parentData.age}}</p> // 10

</template>

<script>

export default {

        name: 'Child',

        props: ['parentData'],

 /*

 props: {

            parentData: {

                type: Object,

                default: null

            }

        },

 */

        data: function() {

            return {

                mention: 'I am child!'

            }

        },

        methods: {

        }

    }

</script>

<style></style>

자식 컴포넌트의 코드에서 눈에 띄는 속성은 바로 props

props는 부모 컴포넌트에서 받아올 데이터를 선언하는 곳이다. 

예제에서 처럼 단순 부모에서 받은 데이터의 이름만 선언해도 되고,

주석처리한 코드처럼 부모에게서 받을 데이터의 타입과 default 값을 함께 선언해도 된다. 

이제 부모 코드를 보자

Parent.vue 

<template>

    <child v-bind:parendData="parentData"></child>

</template>

<script>

    import Child from './Child.vue';

    export default {

        name: 'Parent',

        components: {

            Child

        },

        data: function() {

            return {

                parentData: {name:'Mark', age: 10}

            }

        },

        methods: {

        }

    }

</script>

<style></style>

앞서 자식 컴포넌트에서 

parentData라는 이름의 값을 부모에게서 받아올꺼라고 선언해두었다. 

부모에서는 자식의 template 코드에서 해당 이름(parentData)의 값을 넘겨 주었다. 

그렇다고 v-bind가 부모/자식 상속을 위한 문법은 아니다. 

vue 컴포넌트의 값을 template을 그려줄 때 사용하는 경우에 쓰는 문법인데,

자세한건 doc을 참고해보자. https://kr.vuejs.org/v2/api/#v-bind

혹시라도 같은 네이밍을 사용하여 헷갈릴까봐..

자식에게 데이터를 넘겨줄 때 코드를 자세히 들여다 보면!

v-bind:[자식에서 props로 선언한 값]=[부모에서 갖고 있는 데이터 객체의 이름]

위와 같이 쓰면 된다.

아, 참고로 v-bind의 경우 약어로도 선언이 가능하다. 

위의 코드를 예시 삼아 적어보면

 <template>

    <child :parendData="parentData"></child>

</template>

- 자식의 데이터 부모에게 전달하기 ($emit, $on)

자식에서 부모로 데이터를 전달하기 위해선 이벤트를 사용해야 한다.

이번에도 자식의 코드부터 보자. 

Child.vue

<template>

    <p>{{mention}}</p> // I am child!

    <p>{{parentData.name}}</p> // Mark

    <p>{{parentData.age}}</p> // 10

</template>

<script>

export default {

        name: 'Child',

        props: ['parentData'],

        data: function() {

            return {

                mention: 'I am child!'

            }

        },

        mounted() {

            this.$emit('childRendered', this.mention);

        },

        methods: {

        }

    }

</script>

 

자식 컴포넌트가 mount된 시점에 부모에게 이벤트를 호출하였다. 

코드에서 볼 수 있듯이 $emit 문법이 이벤트를 트리거(trigger)하는 메소드다.

$emit 메소드는 다음과 같이 호출하면 된다. 

this.$emit('이벤트명', 전달하고자 하는 파라미터)

그러면 자식에서 발생한 이벤트를 부모에서 어떻게 받을까? 

Parent.vue

<template>

    <child v-bind:parendData="parentData" v-on:childRendered="childRendered"></child> // 1)

</template>

<script>

    import Child from './Child.vue';

    export default {

        name: 'Parent',

        components: {

            Child

        },

        data: function() {

            return {

                parentData: {name:'Mark', age: 10}

            }

        },

        methods: {

            childRendered(params) { // 2)

                console.log(params); // I am child!

            }

        }

    }

</script>

<style></style>

1) v-on

부모의 template 코드를 보면 알 수 있듯이

v-on 문법을 사용하여 자식의 이벤트를 받아 처리하고 있다. 

v-bind와 마찬가지로 v-on 문법은 부모-자식 사이의 이벤트 처리를 위한 문법이 아니다. 

v-on은 그냥 이벤트를 핸들링할 때 쓰는 문법으로, 

기본적인 마우스 클릭 이벤트도 v-on를 사용하여 처리한다. 

자세한건 https://kr.vuejs.org/v2/api/#v-on 

위의 예제 역시 같은 네이밍으로 헷갈릴까봐 정리하면 다음과 같다.

v-on:[자식에서 실행한 이벤트 이름]=[이벤트를 핸들링할 메소드명]

또한 v-on도 약어가 존재하며, 위의 코드를 예시로 하여 선언하면 다음과 같다. 

<template>

    <child v-bind:parendData="parentData" @childRendered="childRendered"></child>

</template>

2) 이벤트 시점의 전달 데이터

Child 컴포넌트에서는 'childRendered'라는 이벤트를 호출할 때 

mention이라는 내부 데이터 객체를 함께 넣어 호출하였다. 

이 값은 부모에서 이벤트 핸들링 처리 시 (Parent.vue의 childRendered 메소드),

핸들링 메소드의 파라미터로 넘어와, 사용할 수 있다.