Vue.JS 导入自定义模块答案

【问题标题】：Vue.JS import custom moduleVue.JS 导入自定义模块
【发布时间】：2021-03-30 09:02:21
【问题描述】：

我已经创建了一个类似这样的模块 greatings.js：

function greatings() {
  this.hello = function() {
    return 'hello!';
  }

  this.goodbye = function() {
    return 'goodbye!';
  }
}

module.exports = greatings;

然后我将它导入到VUE.JS中的main.js中，就像：

import greatings from './assets/js/greatings';
Vue.use(greatings);

现在我想在我的组件中使用它，但如果我这样做会出错：

  mounted() {
    this.greatings.hello();
  }

错误：挂载钩子错误：“TypeError：无法读取未定义的属性'hello'”

如何解决它并能够使用我的赞美？感谢您的帮助！

【问题讨论】：

v3.vuejs.org/guide/plugins.html

标签： javascript vue.js module vue-component

【解决方案1】：

greatings.js 文件应该是这样的

export default {
  hello() {
    return "hello";
  },
  goodbye() {
    return "goodbye!";
  }
};

并像这样导入您想要使用的任何文件

从'./assets/js/greatings'导入greatings；

并调用任何你想要的函数。去掉这个功能Vue.use(greatings);

【讨论】：

谢谢。如何从 mount(){} 调用 hello 函数？ greatings.hello() ？我有错误...
你可以像这样称呼你好 greatings.hello();
mounted(){ greatings.hello(); }
_assets_js_greatings__WEBPACK_IMPORTED_MODULE_10___default.a.hello 不是函数"
可能是 webpack 错误...我在我的组件中复制了上面相同的代码广告。它加载了greatings.js，但我在mount()中得到了错误

【解决方案2】：

使用 Vue.use() 注册自定义插件时，需要定义一个 install() 函数，由 Vue 调用。来自文档：

Vue.js 插件应该公开一个安装方法。该方法将使用 Vue 构造函数作为第一个参数以及可能的选项来调用。

查看提供的示例，了解您在创建自定义插件时拥有的所有选项：https://vuejs.org/v2/guide/plugins.html

【讨论】：

感谢 Igor，这很有帮助，但我正在尝试重用我的旧脚本；插件需要太多更改。我会评估我是否真的需要一个插件。谢谢建议