Question

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

但是我试图把这个函数放在它自己的单独文件中，这样我就可以导入它以备将来使用，所以我把functions.js文件放在src里面，如下所示：

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

Answer 1

首先，您似乎尝试导入单个函数，但代码中的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.

Answer 2

在functions.js中以这种方式导出：

export class util {
    static tokenGenerator() {
       //do your stuff here
    }
}

在foo.vue：

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

<script>
import { util } from '../../functions';

export default {
  data() {
    return {
       textData: util.tokenGenerator
    }
  } 
}
</script>

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

2 个答案: