Javascript

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

OSC131 2020. 9. 11. 01:34
728x90
반응형

작성일자 : 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>
728x90
반응형