Vue组合式API中@click绑定方法无响应问题求助

你当前的代码没有将test函数暴露给模板使用。Vue 3组合式API中，若使用普通<script>标签（非setup语法糖），定义的变量和函数不会自动暴露给模板；而你也没有通过export default导出这些内容，导致模板无法识别test函数，所以点击事件无响应，还会触发函数不存在的报错。

方案1：使用<script setup>语法糖（推荐） #

这是Vue 3组合式API的最佳实践，定义的变量、函数会自动暴露给模板，无需手动导出。修改后的脚本部分如下：

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const test = () => {
    console.log("testt")
}
</script>

模板部分无需改动，点击导航栏的<a>标签就能正常触发test函数，控制台会输出testt。

方案2：手动导出函数（不使用setup语法糖） #

若坚持使用普通<script>标签，需通过export default导出包含setup函数的对象，在setup函数中返回要暴露给模板的内容：

<script lang="ts">
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const router = useRouter();

    const test = () => {
        console.log("testt")
    }
    
    // 返回要暴露给模板的函数
    return {
      test
    }
  }
})
</script>

另外，你模板里的第二个<a>标签绑定的是asdf函数，但代码里没定义，记得要么删除这个绑定，要么补充asdf函数的定义，避免额外报错。

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