[Vue] 부모 컴포넌트 method를 자식 컴포넌트에서 사용

부모 컴포넌트에 정의되어 있는 method를 자식 컴포넌트에서 사용하고 싶을 때.

props로 해당 method를 받아 사용한다.

 

*Parent 컴포넌트

<template>
  <div>
    <ChildComponent
      :method-name-kebabCase="parentMethod"
    ></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod(){
      return "text"
    }
  }
}
</script>

 

*Child 컴포넌트

<template>
  <div>
    <button
      :class="`button ${getParentMethod(parentMethod)}`"
      >getParentMethod(parentMethod)</button>
  </div>
</template>

<script>
export default {
  props: {
    getParentMethod: {
      type: Function,
      default: () => {}
    }
  }
}
</script>