Question

由于我其中一个页面的主要组成部分变得有些大且难以阅读，因此我想将某些方法外包给前端控制器类。这是我的测试类，位于子文件夹controller/SporteventsController.js

中

export class SporteventsController{
    test(){
        return 'Printing test';
    }
}

我将类导入到组件中，如下所示：

import {SporteventsController} from "./controller/SporteventsController.js";

对于测试，我只是通过方法将方法test的返回值输出到控制台

    methods: {
        testmethod() {
            console.log(SporteventsController.prototype.test());
        }
    },

我试图在网上找到一种更合适的方法，以了解如何将标准ES6类导入vuejs组件中，但效果不理想。

我在上面做的方法几乎不错，但是为什么我必须使用原型而不能仅仅使用SporteventsController.test()？

Answer 1

如果要为SporteventsController定义类函数，则需要使用static关键字：

static关键字为类定义了静态方法。静态方法不会在类的实例上调用。相反，他们被要求类本身。这些通常是实用程序功能，例如功能创建或克隆对象。（source）

//SporteventsController.js

export default class SporteventsController {
  static test() {
    console.log("test");
  }
}

// component

<template>
  <div>
    <button @click="testFromController">click</button>
  </div>
</template>

<script>
import SporteventsController from "./controller/SporteventsController";

export default {
  methods: {
    testFromController() {
      SporteventsController.test()
    }
  }
}
</script>

Answer 2

为了使用.test（），您需要实例化SporteventsController。

export default {
    data () {
        return {
            sporteventsController: new SporteventsController()
        }
    }
}

然后您可以致电this.sporteventsController.test()

您可能还需要检查plugins或mixins。

在VueJS中实现JavaScript类的正确方法

2 个答案: