Vue3 模板调用方法提示不存在？检查 Script Setup 暴露方式

在 Vue 3 开发中，偶尔会遇到模板里调用的方法提示'不存在'的情况。这通常不是逻辑错误，而是组件编写模式导致的暴露范围问题。特别是当你从 Vue 2 迁移过来，或者混合使用了不同风格的 API 时，很容易踩坑。

报错信息通常是 _ctx.xxx is not a function。这意味着模板找不到这个方法。原因往往在于你使用的 setup 风格没有正确把方法暴露给模板。

Vue 3 主要有三种写法，它们的暴露规则各不相同：

Options API（传统写法）

这是 Vue 2 延续下来的风格，方法直接写在 methods 对象里，不需要额外处理就能在模板访问。

export default {
  methods: {
    productSpaceNotice() {
      console.log("方法调用");
    }
  }
}

Composition API + setup() 函数

这种写法需要显式地 return 才能被模板识别。如果在 setup 内部定义了方法却忘了返回，模板就找不到它。

export default {
  setup() {
    const productSpaceNotice = () => {
      console.log("方法调用");
    };
    // 必须返回才能被模板访问
    return { productSpaceNotice };
  }
}

<script setup> 语法糖（推荐）

这是目前最推荐的现代写法。在这个标签内直接定义的变量和方法，会自动暴露给模板，无需 return。

<script setup lang="ts">
// 直接在这里定义，自动暴露给模板
const productSpaceNotice = () => {
  console.log("方法调用");
};
</script>