Vue.jsで子コンポーネントのメソッドを実行する方法

CardBox.vue

<template lang="pug">
  div
    h4 {{name}}
    slot(:sayHello="sayHello")
      a(href="#" @click.prevent="sayHello") ごあいさつ    
</template>

<script>
export default {
  name: 'card-box',
  props: {
    name: {type: String, default: 'sample name'}
  },
  methods: {
    sayHello: function () {
        alert('Hello, I am ' + this.name + '!');
    }
  }
}
</script>

TopPage.vue

<template lang="pug">
  card-box(name="John Doe")
    template(slot-scope="{sayHello}")
      button(@click="sayHello")
        i.fa.fa-check
        | GREETING
</template>

<script>
import CardBox from @/components/CardBox
export default {
  name: 'top-page',
  components: { CardBox }
}
</script>

参考
scoped slots
https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots