Vue3 Composition API点击事件中alert函数失效问题及解决方法

问题场景 #

使用Vue3单文件组件（SFC）Composition API时，编写了如下代码：

<a href="#" @click.prevent="alert('default action prevented')">A link with prevent default</a>

点击链接后未弹出预期的alert框，反而出现以下错误：

_ctx.alert is not a function
render/_cache[2]<@webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90:19:106
withModifiers/<@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:1632:12
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:290:18
callWithAsyncErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:298:38
invoker@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:473:82

错误原因 #

Vue模板中的表达式默认会在**组件实例上下文（_ctx）**中执行，而浏览器原生的alert是挂载在全局window对象上的方法，并不属于组件实例的属性，因此Vue无法在实例中找到alert方法，从而抛出该错误。

解决方法 #

提供两种可行方案：

方案1：直接调用全局window对象上的alert #

修改模板代码，明确指定调用全局对象的alert方法：

<a href="#" @click.prevent="window.alert('default action prevented')">A link with prevent default</a>

方案2：在setup中封装方法后调用（推荐） #

更符合Vue组件化开发实践，将弹窗逻辑封装到组件的setup函数中，再在模板中调用该方法：

<template>
  <a href="#" @click.prevent="showAlert">A link with prevent default</a>
</template>

<script setup>
const showAlert = () => {
  alert('default action prevented')
}
</script>

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