在 Vue 3 的模板中，为 @click 绑定方法时不应加括号（如 showPanel()），而应直接写方法名（如 showPanel），否则会触发 $options.x is not a function 错误。
在 vue 3 的模板中，为 `@click` 绑定方法时不应加括号（如 `showpanel()`），而应直接写方法名（如 `showpanel`），否则会触发 `$options.x is not a function` 错误。
这个问题看似微小，却极易引发运行时异常——尤其在 WordPress + Vue 3 插件开发等非标准构建环境中（如使用 WP Monkey Vue Plugin Generator + Webpack）。根本原因在于：Vue 模板中的事件绑定表达式会在组件实例上下文中求值；当写作 @click="showPanel()" 时，Vue 会尝试立即执行该函数并将其返回值作为事件处理器，而非将函数本身注册为监听器。若此时 showPanel 尚未被正确解析或挂载（例如因编译时作用域问题、选项式 API 的 $options 初始化顺序异常等），就会报出 Uncaught TypeError: $options.showPanel is not a function。
✅ 正确写法（推荐）：
<template>
<div id="frontend-app" class="app">
<button @click="showPanel">Test Button</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
showPanel() {
console.log("Clicked!");
}
}
}
</script>⚠️ 注意事项：
- 不要在模板中调用带括号的方法（除非你明确需要传参且使用内联箭头函数，如 @click="() => showPanel(123)"）；
- 若需传参，务必包裹在箭头函数中，避免立即执行：@click="() => showPanel(item.id)"；
- 在 WordPress 插件场景下，还需确认 Vue 实例是否已正确挂载（检查 createApp(App).mount('#frontend-app') 是否执行，且 DOM 节点存在）；
- 使用 <script setup> 语法糖时，方法需用 defineExpose 显式暴露（但本例为选项式 API，无需此操作）；
- 构建工具（如 Webpack）若未正确处理 .vue 单文件组件，也可能导致 methods 未注入 $options，建议检查 vue-loader 和 @vue/compiler-sfc 版本兼容性（Vue 3.3+ 推荐使用 @vue/compiler-sfc@^3.4）。
? 总结：Vue 3 模板中事件绑定遵循“引用优先”原则——@click="showPanel" 是绑定函数引用，@click="showPanel()" 是执行函数并绑定其返回值（通常为 undefined）。牢记这一点，可规避 90% 的同类事件绑定失效问题。
立即学习“前端免费学习笔记（深入）”；
