我正在使用ionic with vue开发一个应用程序。我制作了一个自定义按钮，并希望包含在另一个组件中。我试图为按钮分配一个功能，但似乎不起作用。我得到的错误是：

[Vue警告]：无效的属性：属性“onClick”的类型检查失败。预期为函数，但得到值为“addTodo”的字符串。

第一次使用vue。提前感谢。

按钮组件

<template>
<ion-footer>
    <ion-button fill="outline" expand="block" color="primary" @click="onClick">
        <ion-ripple-effect></ion-ripple-effect>
        {{text}}
    </ion-button>
</ion-footer>
</template>
<script>
export default {
props: {
    onClick:Function,
    text:String,
}
}
</script>

其他组件

<template>
  <ion-row>
      <ion-col>
        <main-btn text="Add Activity" onClick="addTodo"></main-btn>
      </ion-col>
    </ion-row>
  </ion-grid> 
</template>

<script>
import axios from 'axios';

export default {
    data() {
       return {
         todos: []
          }
    },
    methods: {
      addTodo() {
    this.$router.push({path: '/todos/add'})
   }
  },
    created() {
       axios.get('http://localhost:3001/todos')
     .then(res => this.todos = res.data)
   }
}
 </script>