Vue3调用deleteTransaction报错：_ctx.deleteTransaction不是函数

以下是针对该错误的核心排查点及解决方法：

• 确认函数的上下文暴露正确性
  如果使用 <script setup> 语法，函数需直接定义在顶层作用域，不能嵌套在其他函数或块级作用域内，否则模板无法访问：

  <script setup>
  // ✅ 正确：顶层定义，自动暴露给模板
  const deleteTransaction = async (id) => {
    // 业务逻辑
  }
  
  // ❌ 错误：嵌套在内部函数，模板无法获取
  const initData = () => {
    const deleteTransaction = () => {}
  }
  initData()
  

  若使用选项式API，必须将函数放在 methods 选项中：

  <script>
  export default {
    methods: {
      deleteTransaction(id) {
        // 业务逻辑
      }
    }
  }
  </script>
  

• 检查模板绑定的语法细节
  确认事件绑定的函数名拼写正确，传参格式无误：

  <!-- ✅ 正确写法 -->
  <button @click="deleteTransaction(item._id)">删除交易</button>
  
  <!-- ❌ 常见错误：拼写错误/传参遗漏括号 -->
  <button @click="deletetransaction(item._id)">删除交易</button> <!-- 大小写错误 -->
  <button @click="deleteTransaction">删除交易</button> <!-- 需要传参时必须加括号 -->
  

• 排查异步函数的语法问题
  若函数是异步类型，确保 async 关键字未遗漏，且函数体内无语法错误导致函数未被正确解析：

  <script setup>
  // ✅ 正确的异步函数定义
  const deleteTransaction = async (id) => {
    try {
      await fetch(`/api/transactions/${id}`, { method: 'DELETE' })
      // 后续处理
    } catch (err) {
      console.error('删除失败:', err)
    }
  }
  </script>
  

  注意：await 必须在 async 函数内部使用，否则会引发语法错误，导致函数无法正常定义。

• 跨组件调用的权限检查
  如果 deleteTransaction 是父组件的函数，子组件不可直接引用，需通过自定义事件传递：

  <!-- 父组件 -->
  <TransactionItem @delete="deleteTransaction" />
  
  <!-- 子组件 -->
  <script setup>
  const emit = defineEmits(['delete'])
  </script>
  
  <template>
    <button @click="emit('delete', item._id)">删除</button>
  </template>
  

  直接在子组件模板中调用父组件函数会因作用域隔离导致找不到函数。

• 排查变量名冲突
  确保组件内没有同名变量覆盖函数定义：

  <script setup>
  // ❌ 错误：变量覆盖了函数
  let deleteTransaction = null
  const deleteTransaction = (id) => {}
  </script>
  

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