gpt4 book ai didi

javascript - vuejs中如何隔离可重用的小函数

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:58:56 24 4
gpt4 key购买 nike

我有一个函数可以生成一个随机字符串来生成 token 。我的 methods:{} 中有这个函数,我在我的 div 中使用它没有任何问题。

但是我想把这个函数放在它自己的单独文件中,这样我就可以导入它以供将来使用,所以我在我的 src 中放了一个 functions.js 文件像这样:

// /src/functions.js
export default {
// generate tokes
tokenGenerator () { ... }

}

在我的 src/components/foo.vue 中,我正在导入这个文件(导入没有问题)

<template>
<div> {{ tokenGenerator }} </div>
</template>

<script>
import tokenGenerator from '../../functions'
export default {
data() {
return ;
}
}
</script>

这应该有效,但实际上无效。导入不是问题,而是其他问题。控制台错误告诉我它找不到函数 tokenGenerator

最佳答案

一方面,您似乎试图导入单个函数,但代码中的 tokenGenerator 是对导出到 functions 文件中的整个对象的引用。

其次,您无法使用 Vue 插值 {{ ... }} 访问纯 javascript 函数。模板只能引用相关 Vue 实例上定义为方法的函数。

你可以使用mixin做你想做的事:

// /src/functions.js
export default {
methods: {
// generate tokens
tokenGenerator () { ... }
}
}

<!>

<template>
<div>{{ tokenGenerator }} </div>
</template>

<script>
import mixinFuncs from '../../functions'
export default {
mixins: [ mixinFuncs ],
}
</script>

Here's the documentation on mixins.


如果您只需要访问 Vue 脚本中的 tokenGenerator 函数,那么您可以直接将其导出并导入:

// /src/functions.js
// generate tokens
export const tokenGenerator = () => {
//...
}

<!>

<template>
<div> {{ token }} </div>
</template>

<script>
import { tokenGenerator } from '../../functions'

export default {
data() {
return {
token: tokenGenerator()
}
}
}
</script>

Here's a working example.

关于javascript - vuejs中如何隔离可重用的小函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46347423/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com