[Vue] 컴포넌트간 데이터 통신

작성일자 : 2020.09.11

환경 : Vue 2

 

1. 상위 컴포넌트 -> 하위 컴포넌트

- Props 사용

 

상위 컴포넌트

<template>    <sub-component v-bind:msg="'myMessage'"></sub-component> </template> <script>    ... </script> <style>    ... </style>

- 따옴표를 빼고 변수 명 사용 가능

 

하위 컴포넌트

<template>    {{ msg }} </template> <script> export default {   ...   props: {     msg: String   },   ... } </script> <style>    ... </style>

 

2. 하위 컴포넌트 -> 상위 컴포넌트

- Event Emit 사용

 

상위 컴포넌트

<template>    <sub-component v-on:emitEvent="showEvent"></sub-component> </template> <script> export default {   ...   methods: {     showEvent: function(input1, input2) {       console.log(input1 + ' ' + input2);     }   }   ... } </script> <style>    ... </style>

 

하위 컴포넌트

<template>    <button v-on:click="sendEvent()">Event Emit button</button> </template> <script> export default {   ...   methods: {     sendEvent: function() {       this.$emit('emitEvent','parameter1', 'parameter2');     }   }   ... } </script> <style>    ... </style>