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

yzxexxkh 于 2023-05-18 发布在 Vue.js

关注(0)|答案(3)|浏览(198)

在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()中记录它时定义了它。
但是当我点击链接并尝试从模板中doSomething()时，它说函数没有定义。我是Vue 3的新手，但我想我必须做一些事情来准备函数并使其可用。
如何使导入的函数对我的模板可用？我是否必须调用一个组件方法并在其中使用doSomething？

vue.js

来源：https://stackoverflow.com/questions/68008445/how-do-i-use-an-import-function-in-a-vue-3-template

3条答案

按热度按时间

vxf3dgd41#

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

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

赞(0）回复(0）举报 2023-05-18

jhdbpxl92#

从设置钩子返回：

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

赞(0）回复(0）举报 2023-05-18

d5vmydt93#

对于那些不使用Composition API - Setup()钩子的用户，可以执行以下操作：

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

<script>
import { doSomething } from '@/helpers/stuff.ts'
export default {

   methods: {
      something,
   }
}
</script>

赞(0）回复(0）举报 2023-05-18

我来回答

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

3条答案

相关问题

热门标签

最新问答