如何在 Vue 3 模板中使用导入函数？

Question

在 Vue 3 项目中，我有以下设置。有一个单独的 stuff.ts 文件，里面有一些辅助函数，我想在我的模板中使用它。

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) //<-- logs here okay
    }
  })
</script>

<template>
  <!-- ERROR: doSomething is not a function -->
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

据我所知，该函数已正确导入并在我登录时定义了它 onMounted()。

但是当我单击 link 并尝试从模板中 doSomething() 时，它说函数未定义。我是 Vue 3 的新手，但我想我必须做一些事情来准备函数并使其可用。

如何使导入的函数可用于我的模板？我是否必须改为调用组件方法并在其中使用 doSomething？

Answer 1

Return 来自设置挂钩：

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) 

   return {doSomething}
    }
  })
</script>

<template>
 
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

Answer 2

最简单的方法是通过设置函数return“转发”它

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import { doSomething } from '@/helpers/stuff.ts'
  
  export default defineComponent({
    setup(){
      onMounted(() => console.log(doSomething)) //<-- logs here okay
      return { doSomething }
    }
  })
</script>

<template>
  <!-- ERROR: doSomething is not a function -->
  <a href="#do" @click="doSomething()">Do Something</a>
</template>

如何在 Vue 3 模板中使用导入函数？

How Do I Use an Import Function in a Vue 3 Template?

javascript

vue.js

vuejs3

vue-composition-api