在 vue.js 中，子组件无法直接通过 props 调用父组件方法；正确做法是子组件通过 `this.$emit()` 触发自定义事件，父组件用 `@event-name` 监听并执行对应方法。
在 Vue 组件开发中，一个常见误区是试图将父组件的方法作为普通 prop 传递给子组件并直接调用（如 this.cancelOrderFunction()），这会导致 “xxx is not a function” 错误。根本原因在于：props 是单向数据流，仅用于向下传递数据或配置，不支持反向执行函数逻辑。Vue 官方推荐的、符合响应式设计原则的解决方案是使用自定义事件机制（Event Emitting）。
✅ 正确实现步骤
1. 父组件（changeStatus.vue）：监听事件并定义处理逻辑
<template>
<div>
<p>当前状态：{{ currentStatus }}</p>
<cancel-order @cancel-order="cancelOrderFunction"></cancel-order>
</div>
</template>
<script>
import CancelOrder from '../components/cancelOrder.vue';
export default {
name: 'ChangeStatus',
data() {
return {
currentStatus: 'ACTIVE'
};
},
methods: {
cancelOrderFunction() {
this.currentStatus = 'CANCELLED';
console.log('订单已取消，状态更新为：', this.currentStatus);
}
},
components: {
CancelOrder
}
};
</script>? 注意命名规范：使用 kebab-case（短横线分隔）定义事件名（如 cancel-order），在模板中以 @cancel-order 监听，符合 Vue 惯例且兼容 HTML 特性解析。
2. 子组件（cancelOrder.vue）：声明 emit 并触发事件
<template>
<v-dialog v-model="dialogVisible" max-width="400">
<v-card>
<v-card-title>确认取消订单？</v-card-title>
<v-card-actions>
<v-btn text @click="dialogVisible = false">取消</v-btn>
<v-btn color="error" @click="confirmCancelOrder">Confirm Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'CancelOrder',
emits: ['cancel-order'], // 显式声明触发的事件（Vue 3 推荐写法，增强可维护性）
data() {
return {
dialogVisible: false
};
},
methods: {
confirmCancelOrder() {
this.$emit('cancel-order'); // 触发事件，父组件监听后执行
this.dialogVisible = false; // 同步关闭对话框
}
}
};
</script>✅ 关键点说明：
- emits: ['cancel-order'] 是 Vue 3 的显式事件声明语法（Vue 2.7+ 也支持），提升类型安全与 IDE 提示能力；
- this.$emit('cancel-order') 是标准事件触发方式，不可写作 this.cancelOrderFunction()；
- 对话框关闭逻辑（dialogVisible = false）应放在 $emit 之后，确保状态同步。
⚠️ 常见错误与注意事项
- ❌ 错误：在子组件 props 中声明 cancelOrderFunction 并尝试调用 → 导致 is not a function；
- ❌ 错误：事件名大小写混用（如 @CancelOrder 或 @cancelOrder）→ Vue 模板中事件名始终转为小写，推荐统一用 kebab-case；
- ✅ 最佳实践：若需传递参数（如订单 ID），可在 $emit 中添加第二参数：this.$emit('cancel-order', orderId)，父组件方法签名同步改为 cancelOrderFunction(orderId);
- ✅ 进阶建议：对复杂交互，可结合 v-model 实现双向绑定（如控制 dialog 显示状态），但核心方法调用仍应依赖事件机制。
通过以上方式，你不仅能彻底解决 "this.cancelOrderFunction is not a function" 报错，还能构建出清晰、解耦、可测试的父子组件通信结构。
立即学习“前端免费学习笔记（深入）”；
