Vue.js Vue组件错误：预期函数，获取字符串

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

[Vue warn]：无效的属性：属性“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>

{{text}}
导出默认值{
道具：{
onClick：函数，
文本：字符串，
}
}

另一个组件

<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>

从“axios”导入axios；
导出默认值{
数据（）{
返回{
待办事项：[]
}
},
方法：{
addTodo（）{
这是.$router.push（{path:'/todos/add'}）
}
},
创建（）{
axios.get（）http://localhost:3001/todos')
.然后（res=>this.todos=res.data）
}
}

只需对其进行更改，您不需要将函数作为道具传递

在按钮组件中：

@click="$emit('click')"

在“另一个组件”中

---

只需从子组件中弹出click事件。

您的操作与Vue的预期工作方式背道而驰。您总是希望向下传递由子组件需要的数据组成的道具，并向上向父组件发出事件以处理必要的函数调用

您的子组件“主btn”应该更像下面这样

<ion-button fill="outline" expand="block" color="primary" @click="$emit("onClick")">
    <ion-ripple-effect></ion-ripple-effect>
    {{text}}
</ion-button>

{{text}}

这将允许任何父组件查找子组件发出的onClick事件，并做出相应的反应。在您的情况下，父组件只需要稍微更改

  <ion-col>
    <main-btn text="Add Activity" @onClick="addTodo"></main-btn>
  </ion-col>

父组件正在查找onClick事件，并通过调用其addTodo函数作出相应反应

---

您是否尝试过

onClick=“addTodo（）”

或

：onClick=“addTodo（）”

？@BoussadjraBrahim无效

：onClick=“addTodo”

？