자식 컴포넌트의 함수 호출

ref 또는 eventbus 를 사용한다. 여기서는 ref를 사용.

• 부모 컴포넌트

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  <template> <custom-full-calendar ref="calendar" /> </template> <script> import {CustomFullCalendar} from '@' export default { components: { CustomFullCalendar }, methods: { nextWeekDate() { this.$refs.calendar.nextDate() // 자식 컴포넌트의 함수를 호출 } } } </script>

• 자식 컴포넌트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
	<div class="custom-full-calendar" />
</template>

<script>
  import {CustomFullCalendar} from '@'
 
  export default {
	methods: {
      nextDate() {
  		console.log('다음 날짜 입니다')
      }
    }
  }
</script>

Reference

https://stackoverflow.com/questions/40957008/how-to-access-to-a-child-method-from-the-parent-in-vue-js/47565763#47565763

Comment and share