如何将函数导入 Vue 组件？

Posted 2023-02-22

【中文标题】如何将函数导入 Vue 组件？

【英文标题】：How to import a function to a Vue component?

【发布时间】：2019-01-17 07:12:26

【问题描述】：

我正在尝试将单个函数导入到我的 Vue 组件中。我为我的函数创建了一个单独的 js 文件：

randomId.js：

exports.randomId = () => //My function ...

在我的 Vue 组件中，我已经导入了 Random js：

let randomId = require('../functions/randomId');
randomId();

但是 Webpack 会抛出“randomId 不是函数”的错误。 我尝试使用导入语法导入文件，但错误仍然存​​在。

import randomId from '../functions/randomId';

我应该使用其他方法来导入单个函数吗？我对 Webpack 和 JS6 比较陌生。

【问题讨论】：

你可以找到this article helpful

【参考方案1】：

更改您的功能模块以正确使用 ES6 导出：

export function randomId()  /*My function ...*/ 

然后使用 ES6 命名导入：

import  randomId  from '../functions/randomId';

【参考方案2】：

如果你想使用 CommonJS，那么在带有你的 randomId 函数的文件中执行以下操作：

function randomId() 
   ...


module.exports = randomId;

然后你的 Vue 组件中的 let randomId = require('../functions/randomId'); 就可以工作了。