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


