从 Vue.js 组件数据中导入的辅助类调用函数答案

【问题标题】：Call function from imported helper class in Vue.js component data从 Vue.js 组件数据中导入的辅助类调用函数
【发布时间】：2019-06-18 11:33:03
【问题描述】：

我正在尝试从我的Vue.js component 中的导入助手class 调用JavaScript function。我在component 中import 我的助手class 并尝试使用mounted() 调用它并将参数传递给助手class。

我从这里尝试了一些解决方案，但没有帮助： Vue.js: Import class with function and call it in child component

https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266

这是我到目前为止所尝试的，有什么想法吗？

我有一个助手类myHelper.js：

export default myHelper {
    myHelperFunction(param) {
        return param;
    }
}

我有一个Vue 组件MyComponent.vue：

<template>
  <v-text-field :rules="[myRule]"></v-text-field>
</template>

<script>
import myHelper from './myHelper.js';

export default {
  name: 'MyComponent',
  data() {
    return {
      myCls: new myHelper(),
      myRule: this.callHelperFunction,
    };
  },
  components: {
    myHelper,
  },
  mounted() {
    this.myCls.myHelperFunction();
  },
  methods: {
    callHelperFunction(param) {
      this.myCls.myHelperFunction(param);
    }
  },
};
</script>

【问题讨论】：

标签： javascript class vue.js vuetify.js

【解决方案1】：

您并没有真正导出课程。它是一个普通的对象。要导出类而不是对象，请执行以下操作：

// Notice the use of class keyword
export default class MyHelper {
    myHelperFunction(param) {
        return param;
    }
}

另外，你不需要：

components: {
    myHelper,
},

其余代码保持不变。

【讨论】：