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

Question

我正在尝试从 Vue.js 中导入的帮助器 class 调用 JavaScript function 组件。我在我的组件中导入我的帮助器class并尝试使用mounted()来调用它并传递参数到助手类。

我从这里尝试了一些解决方案，但没有帮助: 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>

Answer 1

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

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

此外，您不需要:

components: {
    myHelper,
},

其余代码保持不变。