Vue.js子组件调用父组件方法报错：this.cancelOrderFunction不是函数

问题排查与修复方案 #

1. 规范组件命名与Props传递格式 #

Vue组件命名建议遵循大驼峰注册、短横线调用的规范，Props传递时用短横线格式匹配，避免因命名不一致导致传参失败：

父组件（changeStatus.vue）修改：

<template>
    <!-- 组件调用采用短横线格式 -->
    <cancel-order :cancel-order-function="cancelOrderFunction"></cancel-order>
</template>

<script>
import cancelOrder from "../components/cancelOrder.vue";
export default {
  data: () => ({
    currentStatus: "ACTIVE",
  }),
  methods: {
    cancelOrderFunction() {
      this.currentStatus = "CANCELLED";
    },
  },
  components: {
    // 组件注册用大驼峰格式（可选，符合Vue规范）
    CancelOrder: cancelOrder,
  },
};
</script>

子组件（cancelOrder.vue）修改：

给Props添加类型校验确保传递的是函数，并增加调用前的存在性判断，避免报错：

<template>
  <div>
    <v-btn @click="dialog = true">Cancel Order</v-btn>
    <v-dialog v-model="dialog">
      <v-card>
        <v-card-actions>
          <v-btn @click="confirmCancelOrder">Confirm Cancel</v-btn>
          <v-btn @click="dialog = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    cancelOrderFunction: {
      type: Function,
      required: true // 强制要求传递该方法，避免遗漏
    }
  },
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    confirmCancelOrder() {
      // 先校验方法存在性再调用
      if (typeof this.cancelOrderFunction === 'function') {
        this.cancelOrderFunction();
        this.dialog = false; // 调用完成后关闭弹窗
      }
    },
  },
};
</script>

2. 检查弹窗组件的作用域 #

如果弹窗是第三方组件（如Vuetify的v-dialog）或动态渲染的，需确保弹窗内按钮的作用域能正确访问父组件传递的Props。直接将弹窗内容写在cancelOrder组件内部，可保证作用域统一，避免Props未传递到弹窗内部的问题。

3. 确认方法的this指向 #

确保父组件的方法通过methods对象定义，避免使用箭头函数导致this指向错误：

// 正确写法
methods: {
  cancelOrderFunction() {
    this.currentStatus = "CANCELLED";
  }
}

// 错误写法（this会指向window而非组件实例）
methods: {
  cancelOrderFunction: () => {
    this.currentStatus = "CANCELLED";
  }
}

内容的提问来源于stack exchange，提问作者SAMPREET GUMPARLA